jQuery图片切换效果

原文地址为： jQuery图片切换效果

     这几天刚开始学习 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

 1 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 >

转载请注明本文地址： jQuery图片切换效果