这几天刚开始学习jQuery，感觉jQuery确实很强大，下了个CHM的手册，看他的筛选器，属性还有各种方法
感觉不难，几天不碰 忘记了，看来还是缺乏练习，还没有真正会用，只是理解怎么回事吧了，所以决定坚持天天练习
自己动手写，
这个是个简单的图片切换，当然只用js也能很好的实现，但是感觉没有jQuery来的快速直接，尤其是他的选择器很方便，
不用在js里面做循环了 呵呵，我做的初衷是实现缩略图单击后图片淡入淡出，但是尝试了很多次没有解决，也不知道问题出在哪里
如果有谁知道，请在评论里面给我指教一下，不 胜感激。
效果图入下
代码实现部分
1
$(document).ready(function(){//这里最好不要用$()取代
2
$(“.thumil_img img“).hover(
3
function(){$(this).animate({marginRight:“20“}),“slow“},
4 function(){$(this).animate({marginRight:“0“}),“slow“}
5 )
6 $(“.thumil_img li a“).click(function(){
7 var img_path=$(this).attr(“href“);
8 var title=$(this).attr(“title“);
9 $(“#largeImages“).attr({src:img_path}) ;
10 $(“#largeImages“).fadeIn(“slow“)
11 $(“.title“).html(title);
12 return false;//一定要有return false，否则会跳转链接到图片
13
})
14
});
15
$(document).ready(function(){//这里最好不要用$()取代
2
$(“.thumil_img img“).hover(3
function(){$(this).animate({marginRight:“20“}),“slow“},
4
function(){$(this).animate({marginRight:“0“}),“slow“}5
)6
$(“.thumil_img li a“).click(function(){7
var img_path=$(this).attr(“href“);8
var title=$(this).attr(“title“);9
$(“#largeImages“).attr({src:img_path}) ;10
$(“#largeImages“).fadeIn(“slow“)11
$(“.title“).html(title);12
return false;//一定要有return false，否则会跳转链接到图片 13
})14
});15
1a {
2 blr:expression(this.onFocus=this.blur())
3}/*去除a标点击后的签的虚线,在FF浏览器下不起作用，只好又在a标签里面写入了*/
4* {
5 margin:0;
6 padding:0;
7}
8#reimg {
9 margin:0 auto;
10 width:410px;
11 margin-top:200px;
12}
13#largeImages {
14 height:250px;
15 width:400px;
16 display:block;
17 margin-bottom:5px;
18 padding:5px;
19 border:1px #ccc solid;
20}
21.thumil_img {
22 list-style:none;
23 height:20px;
24 margin-bottom:5px;
25 width:200px;
26 display:inline;
27}
28.thumil_img li {
29 float:left;
30 margin-right:5px;
31}
32.thumil_img img {
33 height:20px;
34 padding:2px;
35 border:1px solid #ccc;
36}
37.title {
38 float:right;
39 margin-right:10px;
40 display:block;
41}
42.title p:first-letter {
43 text-transform:uppercase;
44}
a {2
blr:expression(this.onFocus=this.blur())3
}/*去除a标点击后的签的虚线,在FF浏览器下不起作用，只好又在a标签里面写入了*/4
* {5
margin:0;6
padding:0;7
}8
#reimg {9
margin:0 auto;10
width:410px;11
margin-top:200px;12
}13
#largeImages {14
height:250px;15
width:400px;16
display:block;17
margin-bottom:5px;18
padding:5px;19
border:1px #ccc solid;20
}21
.thumil_img {22
list-style:none;23
height:20px;24
margin-bottom:5px;25
width:200px;26
display:inline;27
}28
.thumil_img li {29
float:left;30
margin-right:5px;31
}32
.thumil_img img {33
height:20px;34
padding:2px;35
border:1px solid #ccc;36
}37
.title {38
float:right;39
margin-right:10px;40
display:block;41
}42
.title p:first-letter {43
text-transform:uppercase;44
}1 <div id=”reimg”> <img id=”largeImages” src=”images/1.jpg” />
2 <ul class=”thumil_img”>
3 <li><a href=”images/1.jpg” title=”Apple” onFocus=”this.blur()”><img src=”images/1.jpg” /></a></li>
4 <li><a href=”images/2.jpg” title=”Cool” onFocus=”this.blur()”><img src=”images/2.jpg” /></a></li>
5 <li><a href=”images/3.jpg” title=”Diamond” onFocus=”this.blur()”><img src=”images/3.jpg” /></a></li>
6 <li><a href=”images/4.jpg” title=”Color” onFocus=”this.blur()”><img src=”images/4.jpg” /></a></li>
7 </ul>
8 <span class=”title”>Apple</span>
9 </div>
2 <ul class=”thumil_img”>
3 <li><a href=”images/1.jpg” title=”Apple” onFocus=”this.blur()”><img src=”images/1.jpg” /></a></li>
4 <li><a href=”images/2.jpg” title=”Cool” onFocus=”this.blur()”><img src=”images/2.jpg” /></a></li>
5 <li><a href=”images/3.jpg” title=”Diamond” onFocus=”this.blur()”><img src=”images/3.jpg” /></a></li>
6 <li><a href=”images/4.jpg” title=”Color” onFocus=”this.blur()”><img src=”images/4.jpg” /></a></li>
7 </ul>
8 <span class=”title”>Apple</span>
9 </div>
