下面小编就为大家带来一篇完美JQuery图片切换效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。 css：

body { font-family:\

body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;}   img{vertical-align: top;} /***大图切换***/

.scroll_view{margin: 0px auto;overflow:hidden;position: relative;} .photo_view li{position:absolute;width: 100%;}

.photo_view li em,.photo_view li h3{position: absolute;bottom: 0px;z-index: 1;height: 35px;line-height: 35px;width: 100%;left: 0px;} .photo_view li em{z-index: 1;background:rgba(0,0,0,0.5);filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#50000000',endColorstr = '#50000000');_background:#000;}

.photo_view li h3{z-index: 2;text-indent: 1em;font-weight: normal;} .photo_view li h3 a{color:#fff;}

.photo_view li h3 a:hover{color:#f60;}

.small_photo{position: absolute;bottom: 40px;right: 10px;cursor: pointer;z-index: 4;} .small_photo li {float: left;padding-right: 10px;}

.small_photo li img{width: 80px;height: 35px;border: solid 2px #ccc;border-radius: 2px;} .small_photo li.active img{border: solid 2px #f60;} html：

<!-- start:大图切换 --> <div class=\

  <ul class=\     <li><img src=\alt=\class=\/><em></em><h3><a href=\图片效果1</a></h3></li>     <li><img src=\alt=\class=\/><em></em><h3><a href=\图片效果2</a></h3></li>     <li><img src=\alt=\class=\/><em></em><h3><a href=\图片效果3</a></h3></li>     <li><img src=\alt=\class=\/><em></em><h3><a href=\图片效果4</a></h3></li>   </ul>

  <ul class=\ </div>

<!-- End:大图切换 --> js：

$.fn.extend({  

  imgScroll:function(options){         var def={phtot_parent:$(\,speed:800,isauto:true,width:800,height:349},

      opt=$.extend({},def,options),       $photo_view=opt.photo_view,       $small_photo=opt.small_photo,       speed=opt.speed,       isauto=opt.isauto,       index=0,

      _length=$photo_view.find(\       strTime=null;

    opt.phtot_parent.css({width:opt.width,height:opt.height});     $photo_view.find(\     $photo_view.find(\       $small_photo.append('<li><img src=\     })

    $small_photo.find(\     //小图鼠标动作

    $small_photo.find(\       clearInterval(strTime);       if(index!=$(this).index()){

        index=$(this).index();           animate(index)       }

    }).bind(\       if(isauto){

        start();         }     });

    //大图悬停动作

    $photo_view.find(\       clearInterval(strTime);           }).bind(\       if(isauto){

        start();         }     });

    //自动播放     if(isauto){

      start();       }

    //启动自动播放     function start(){

      strTime=setInterval(function(){

        index >= _length-1 ? index=0 : index++;         animate(index);       },speed);     }

    //动画效果

    function animate(_index){//console.log(_index)       $small_photo.find(\改变小图导航样式       $photo_view.find(\控制absolute的层级

      $photo_view.find(\0});  //装大图的opacity设置为0         $photo_view.find(\

        $(this).removeAttr(\动画之后删除opacity

        $photo_view.find(\显示大图  

      });//展示当前显示动画     }   } });

<script type=\   $(function(){$(\oto\   }) </script>

以上这篇完美JQuery图片切换效果的简单实现就是小编分享给大家的全部内容了，希

望能给大家一个参考