完美JQuery图片切换效果的简单实现

下面小编就为大家带来一篇完美JQuery图片切换效果的简单实现。

小编觉得挺不错的，现在就分享给大家，也给大家做个参考。

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");    //小图鼠标动作    $small_photo.find("li").bind("mouseenter",function(){        clearInterval(strTime);      if(index!=$(this).index()){        index=$(this).index();          animate(index)      }    }).bind("mouseleave",function(){            if(isauto){        start();        }    });    //大图悬停动作    $photo_view.find("li").bind("mouseenter",function(){        clearInterval(strTime);          }).bind("mouseleave",function(){            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("li").eq(_index).addClass('active').siblings().removeClass("active");//改变小图导航样式      $photo_view.find("li").eq(_index).css("z-index",1).siblings().css("z-index",0);//控制absolute的层级      $photo_view.find("li").eq(_index).show().find("img").css({"opacity": 0});  //装大图的opacity设置为0        $photo_view.find("li").eq(_index).find("img").animate({opacity:1},300,function(){         $(this).removeAttr("style");//动画之后删除opacity        $photo_view.find("li").eq(_index).show().siblings().hide();//显示大图       });//展示当前显示动画    }  }});<script type="text/javascript">  $(function(){$("scroll_view").imgScroll({photo_view:$(".photo_view"),small_photo:$(".small_ph oto"),speed:3000,isauto:true});   })</script>以上这篇完美JQuery图片切换效果的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考。