完美JQuery图片切换效果
效果：
css:
1 body { font-family:"Microsoft Yahei"; } 2 body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;} 3 img{vertical-align: top;} 4 /***大图切换***/ 5 .scroll_view{margin: 0px auto;overflow:hidden;position: relative;} 6 .photo_view li{position:absolute;width: 100%;} 7 .photo_view li em,.photo_view li h3{position: absolute;bottom: 0px;z-index: 1;height: 35px;line-height: 35px;width: 100%;left: 0px;} 8 .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;} 9 .photo_view li h3{z-index: 2;text-indent: 1em;font-weight: normal;} 10 .photo_view li h3 a{color:#fff;} 11 .photo_view li h3 a:hover{color:#f60;} 12 .small_photo{position: absolute;bottom: 40px;right: 10px;cursor: pointer;z-index: 4;} 13 .small_photo li {float: left;padding-right: 10px;} 14 .small_photo li img{width: 80px;height: 35px;border: solid 2px #ccc;border-radius: 2px;} 15 .small_photo li.active img{border: solid 2px #f60;}
html:
1 <!-- start:大图切换 --> 2 <div class="scroll_view"> 3 <ul class="photo_view"> 4 <li><img src="images/ad1.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果1</a></h3></li> 5 <li><img src="images/ad2.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果2</a></h3></li> 6 <li><img src="images/ad3.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果3</a></h3></li> 7 <li><img src="images/ad4.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果4</a></h3></li> 8 </ul> 9 <ul class="small_photo"></ul> 10 </div> 11 <!-- End:大图切换 -->
js:
1 $.fn.extend({ 2 imgScroll:function(options){ 3 var def={phtot_parent:$(".scroll_view"),photo_view:$(".photo_view"),small_photo:$(".small_photo"),speed:800,isauto:true,width:800,height:349}, 4 opt=$.extend({},def,options), 5 $photo_view=opt.photo_view, 6 $small_photo=opt.small_photo, 7 speed=opt.speed, 8 isauto=opt.isauto, 9 index=0, 10 _length=$photo_view.find("li").length, 11 strTime=null; 12 opt.phtot_parent.css({width:opt.width,height:opt.height}); 13 $photo_view.find("li:not(:first)").hide()//.find("img").hide(); 14 $photo_view.find("li").each(function(i){ 15 $small_photo.append('<li><img src="'+$(this).find("img").attr("src")+'" alt="" class="" /></li>'); 16 }) 17 $small_photo.find("li:first").addClass("active"); 18 //小图鼠标动作 19 $small_photo.find("li").bind("mouseenter",function(){ 20 clearInterval(strTime); 21 if(index!=$(this).index()){ 22 index=$(this).index(); 23 animate(index) 24 } 25 }).bind("mouseleave",function(){ 26 if(isauto){ 27 start(); 28 } 29 }); 30 //大图悬停动作 31 $photo_view.find("li").bind("mouseenter",function(){ 32 clearInterval(strTime); 33 }).bind("mouseleave",function(){ 34 if(isauto){ 35 start(); 36 } 37 }); 38 //自动播放 39 if(isauto){ 40 start(); 41 } 42 //启动自动播放 43 function start(){ 44 strTime=setInterval(function(){ 45 index >= _length-1 ? index=0 : index++; 46 animate(index); 47 },speed); 48 } 49 //动画效果 50 function animate(_index){//console.log(_index) 51 $small_photo.find("li").eq(_index).addClass('active').siblings().removeClass("active");//改变小图导航样式 52 $photo_view.find("li").eq(_index).css("z-index",1).siblings().css("z-index",0);//控制absolute的层级 53 $photo_view.find("li").eq(_index).show().find("img").css({"opacity": 0}); //装大图的opacity设置为0 54 $photo_view.find("li").eq(_index).find("img").animate({opacity:1},300,function(){ 55 $(this).removeAttr("style");//动画之后删除opacity 56 $photo_view.find("li").eq(_index).show().siblings().hide();//显示大图 57 });//展示当前显示动画 58 } 59 } 60 });
<script type="text/javascript"> $(function(){$("scroll_view").imgScroll({photo_view:$(".photo_view"),small_photo:$(".small_photo"),speed:3000,isauto:true}); }) </script>
