下面小編就為大家?guī)?lái)一篇完美JQuery圖片切換效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。

css：

body { font-family:"Microsoft Yahei"; }

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="scroll_view">

  <ul class="photo_view">

    <li><img src="images/ad1.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">圖片效果1</a></h3></li>

    <li><img src="images/ad2.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">圖片效果2</a></h3></li>

    <li><img src="images/ad3.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">圖片效果3</a></h3></li>

    <li><img src="images/ad4.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">圖片效果4</a></h3></li>

  </ul>

  <ul class="small_photo"></ul>

</div>

<!-- End:大圖切換 -->

js：

$.fn.extend({  

  imgScroll:function(options){    

    var def={phtot_parent:$(".scroll_view"),photo_view:$(".photo_view"),small_photo:$(".small_photo"),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("li").length,

      strTime=null;

    opt.phtot_parent.css({width:opt.width,height:opt.height});

    $photo_view.find("li:not(:first)").hide()//.find("img").hide();

    $photo_view.find("li").each(function(i){

      $small_photo.append('<li><img src="'+$(this).find("img").attr("src")+'" alt="" class="" /></li>');

    })

    $small_photo.find("li:first").addClass("active");

    //小圖鼠標(biāo)動(dòng)作

    $small_photo.find("li").bind("mouseenter",function(){  

      clearInterval(strTime);

      if(index!=$(this).index()){

        index=$(this).index();  

        animate(index)

      }

    }).bind("mouseleave",function(){      

      if(isauto){

        start();  

      }

    });

    //大圖懸停動(dòng)作

    $photo_view.find("li").bind("mouseenter",function(){  

      clearInterval(strTime);      

    }).bind("mouseleave",function(){      

      if(isauto){

        start();  

      }

    });

    //自動(dòng)播放

    if(isauto){

      start();  

    }

    //啟動(dòng)自動(dòng)播放

    function start(){

      strTime=setInterval(function(){

        index >= _length-1 ? index=0 : index++;

        animate(index);

      },speed);

    }

    //動(dòng)畫效果

    function animate(_index){//console.log(_index)

      $small_photo.find("li").eq(_index).addClass('active').siblings().removeClass("active");//改變小圖導(dǎo)航樣式

      $photo_view.find("li").eq(_index).css("z-index",1).siblings().css("z-index",0);//控制absolute的層級(jí)

      $photo_view.find("li").eq(_index).show().find("img").css({"opacity": 0});  //裝大圖的opacity設(shè)置為0  

      $photo_view.find("li").eq(_index).find("img").animate({opacity:1},300,function(){

        $(this).removeAttr("style");//動(dòng)畫之后刪除opacity

        $photo_view.find("li").eq(_index).show().siblings().hide();//顯示大圖  

      });//展示當(dāng)前顯示動(dòng)畫

    }

  }

});

<script type="text/javascript">

  $(function(){$("scroll_view").imgScroll({photo_view:$(".photo_view"),small_photo:$(".small_photo"),speed:3000,isauto:true}); 

  })

</script>

以上這篇完美JQuery圖片切換效果的簡(jiǎn)單實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考