圖片輪播效果

今天有點空，寫了個圖片輪播的效果，使用了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     }

View Code

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 });