图片轮播效果
今天有点空，写了个图片轮播的效果，使用了jq，直接上代码吧。
效果： 图片轮播图
更多特效：Jeff Zhong's Demo
html如下：
1 <div class="wrap"> 2 <div id="leftBtn" class="btn fl"><i class="icon-left-open"></i></div> 3 <div id="rightBtn" class="btn fr"><i class="icon-right-open"></i></div> 4 <ul class="pics clearfix"> 5 <li><img src="http://oncse3u6r.bkt.clouddn.com/matishi5.jpg" alt="" /></li> 6 <li><img src="http://oncse3u6r.bkt.clouddn.com/qicaidx7.jpg" alt="" /></li> 7 <li><img src="http://oncse3u6r.bkt.clouddn.com/yueyaquan3.jpg" alt="" /></li> 8 <li><img src="http://oncse3u6r.bkt.clouddn.com/yueliangwan3.jpg" alt="" /></li> 9 <li><img src="http://oncse3u6r.bkt.clouddn.com/jiahe11.jpg" alt="" /></li> 10 <li><img src="http://oncse3u6r.bkt.clouddn.com/mingshashan.jpg" alt="" /></li> 11 <li><img src="http://oncse3u6r.bkt.clouddn.com/mingshashan1.jpg" alt="" /></li> 12 <li><img src="http://oncse3u6r.bkt.clouddn.com/mingshashan2.jpg" alt="" /></li> 13 </ul> 14 </div>
css如下：
1 .wrap{ 2 width: 820px; 3 height: 240px; 4 padding: 30px; 5 overflow: hidden; 6 margin: 0 auto; 7 } 8 .btn{ 9 width: 30px; 10 height: 240px; 11 line-height: 240px; 12 text-align: center; 13 font-size: 20px; 14 cursor: pointer; 15 } 16 .btn:hover{ 17 color: #067ab4; 18 } 19 .fl{float: left;} 20 .fr{float: right;} 21 22 .pics{ 23 list-style-type: none; 24 margin: 0 30px; 25 padding: 0; 26 position: relative; 27 } 28 .pics li{ 29 position: absolute; 30 top:60px;right:380px; 31 width: 160px; 32 height: 120px; 33 background-color: #000; 34 display: none; 35 cursor: pointer; 36 } 37 .pics img{ 38 width: 100%; 39 height: 100%; 40 opacity: 1;filter: alpha(opacity=100); 41 }
js如下：
1 $(function(){ 2 //轮播使用到的5张图片 3 var configs=[ 4 {i:2,zIndex:5,opacity: 1,animate:{top:'0',left:'220px',width:'320px',height:'240px'}}, 5 {i:1,zIndex:4,opacity: 0.5,animate:{top:'22px',left:'100px',width:'260px',height:'195px'}}, 6 {i:3,zIndex:3,opacity: 0.5,animate:{top:'22px',left:'400px',width:'260px',height:'195px'}}, 7 {i:0,zIndex:2,opacity: 0.2,animate:{top:'60px',left:'30px',width:'160px',height:'120px'}}, 8 {i:4,zIndex:1,opacity: 0.2,animate:{top:'60px',left:'570px',width:'160px',height:'120px'}} 9 ], 10 //隐藏的图片 11 hid={zIndex:0,top:'60px',left:'380px',width:'160px',height:'120px',opacity: 1,display:'none'}, 12 lis=[].slice.call($('.pics li')), 13 pLen=lis.length, 14 cLen=configs.length,i, 15 timer=null, 16 isAnimating=false; 17 //初始化 18 function init(){ 19 if(pLen<configs.length){ 20 cLen=configs.length=pLen; 21 } 22 configs.sort(function(a,b){ 23 return a.i-b.i; 24 }); 25 i=Math.floor(cLen/2); 26 while(i--){ 27 slideRight(); 28 } 29 animate(400); 30 } 31 //执行动画 32 function animate(interval){ 33 $(lis).each(function(i,item){ 34 if(configs[i]){ 35 $(item).attr("i",i) 36 .css({zIndex:configs[i].zIndex}) 37 .animate(configs[i].animate, interval).show() 38 .children('img').animate({opacity:configs[i].opacity}, interval); 39 } else { 40 $(item).css(hid); 41 } 42 }); 43 } 44 45 //将元素第1项移到队列尾部从而实现向右移动的效果 46 function slideLeft(){ 47 lis.push(lis.shift()); 48 } 49 //将元素最后1项移到队列头部从而实现向左移动的效果 50 function slideRight(){ 51 lis.unshift(lis.pop()); 52 } 53 //自动轮播 54 function next(){ 55 timer=setInterval(function(){ 56 slideLeft(); 57 animate(400); 58 },2000); 59 } 60 61 //绑定向左向右事件 62 //鼠标移入，清除自动播放，移开时添加自动播放，点击执行向/左向右滚动 63 //同时控制点击间隔为300ms 64 $('#leftBtn,#rightBtn').click(function(event){ 65 if(isAnimating){return;} 66 if(this.id=='leftBtn'){ 67 slideLeft(); 68 } else { 69 slideRight(); 70 } 71 72 animate(400); 73 isAnimating=true; 74 setTimeout(function(){ 75 isAnimating=false; 76 },300); 77 }).mouseover(function(){ 78 clearInterval(timer); 79 }).mouseout(next); 80 81 //鼠标移入ul时，清除自动播放，移开时添加自动播放 82 $('.pics').mouseover(function() { 83 clearInterval(timer); 84 }).mouseout(next); 85 86 //点击两侧的图片将立即移动到中间显示 87 $('.pics').on('click', 'li', function(event) { 88 var index=$(this).attr('i'), 89 interval=300, 90 len=0; 91 92 index=index-Math.floor(cLen/2);//在图片到正中间隔着几张 93 94 if(index==0) return;//点到的是正在最前面展示的图片 95 len=Math.abs(index);//动画要执行的次数 96 interval=Math.floor(interval/len);//动画间隔 97 98 while(len--){ 99 if(index<0){ 100 slideRight(); 101 } else { 102 slideLeft(); 103 } 104 animate(interval); 105 } 106 }); 107 108 init(); 109 next(); 110 });
