jQuery仿淘寶圖片無縫滾動輪播

本身前天，也就是1月8日的時候早上本身寫了一個圖片滾動輪播(基於jQuery)。

其實幾個月之前就有朋友問過我怎麼作出和淘寶上面同樣的滾動輪播，一直到如今也沒有真正的寫好，此次寫得差很少了。

可是還有兩個問題

 

1. 沒有作左右按鈕效果
2. 沒有寫成面向對象

代碼先放上來存着，後續還會加上左右按鈕而且試着寫成面向對象。

 

 demo : http://codepen.io/NightLostK/full/BypVeY

HTML:

 1 <div class="pic_flash">
 2             <ul>
 3                 <li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu04.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
 4                 <li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu01.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
 5                 <li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu02.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
 6                 <li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu03.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
 7                 <li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu04.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
 8                 <li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu01.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
 9             </ul>
10         </div>

 

CSS:

1 li { list-style:none;}

 

JAVASCRIPT:

  1 $(function(){
  2 
  3         //使用方法， 變量$picFlash 的 選擇器對應上你的 類名或者ID名便可
  4 
  5     var flash = (function(){
  6         var $picFlash = $('.pic_flash');
  7         //給圖片列表添加類名
  8         $picFlash.children(':first').attr('class','pic_list');
  9         //設置樣式
 10         $('.pic_list li').css('float','left').children('a').css({'display':'block', 'float':'left'});
 11         $('.pic_list li a img').css('float','left');
 12 
 13 
 14 
 15         //獲取圖片寬度
 16         var imgWitdh = $picFlash.find('img').eq(0).width();
 17 
 18         //獲取圖片數量
 19         var imgLen = $picFlash.find('img').length;
 20 
 21         //獲取圖片高度
 22         var imgH = $picFlash.find('img').eq(0).height();
 23 
 24         //設置圖片ul 寬高
 25         $picFlash.children('ul').eq(0).width(imgWitdh*imgLen).height(imgH);
 26 
 27         //設置輪播可見區域的寬高, 且隱藏溢出
 28         $picFlash.height(imgH).width(imgWitdh).css({'overflow':'hidden','margin':'0 auto'});
 29 
 30         $('.pic_list').css('margin-left', -imgWitdh + 'px');
 31 
 32         /*******************添加小圓點按鈕*************************************/
 33 
 34         var oBtn = "<ul class='btn_list'></ul>";
 35 
 36         $picFlash.append(oBtn);
 37 
 38         for(var i = 0; i < imgLen-2; i++){
 39             $('.btn_list').append('<li></li>');
 40         }
 41 
 42         //設置按鈕 大小和位置單位
 43         var btEm = imgH/20;
 44 
 45         //按鈕li 樣式
 46         $('.btn_list li').css({
 47             'height':btEm + 'px',
 48             'width':btEm + 'px',
 49             'background-color':'#faf',
 50             'margin-right':btEm/2 + 'px',
 51             'float':'left',
 52             'border-radius':btEm
 53         });
 54         //第一個按鈕默認當前
 55         $('.btn_list li').eq(0).css('background-color','#f6f');
 56 
 57         //按鈕ul 樣式
 58         $('.btn_list').width(7*btEm).height(btEm).css({
 59             'position':'absolute',
 60             'left':0,
 61             'bottom':btEm/2 + 'px',
 62             'left':imgWitdh/2-3*btEm + 'px'
 63         });
 64 
 65         $picFlash.css('position','relative');
 66 
 67         //設置按鈕序列
 68         var btnIndex = 1;
 69 
 70         var picIndex = 2;
 71 
 72 
 73 
 74         //動畫主函數
 75         var movie = function(){
 76 
 77             $('.btn_list li').eq(btnIndex).css('background-color','#f6f').siblings().css('background-color','#faf');
 78             if(picIndex == imgLen-1){
 79                 $('.pic_list').stop(true).animate({'margin-left': -picIndex * imgWitdh + 'px'},'',function(){
 80                     $(this).css('margin-left', -imgWitdh + 'px');
 81                 });
 82             }else{
 83                 $('.pic_list').animate({'margin-left': -picIndex * imgWitdh + 'px'});
 84             }
 85 
 86 
 87         }
 88 
 89         var setInterValue = setInterval(function(){
 90 
 91             movie()
 92             btnIndex++;
 93             picIndex++;
 94             if(btnIndex == imgLen-2){
 95                 btnIndex = 0
 96             }
 97             if(picIndex == imgLen){
 98                 picIndex = 2
 99             }
100 
101         },2000)
102 
103 
104         var setTimeClose;
105 
106         //按鈕點擊事件
107         $('.btn_list li').click(function(){
108 
109 
110             clearTimeout(setTimeClose);
111 
112             var index = $(this).index() + 1;
113 
114             $('.pic_list').stop(true,false);
115             clearInterval(setInterValue);
116             //清空週期後，重置 btnIndex 和 picIndex
117             btnIndex = index;
118             picIndex = index + 1;
119             if(btnIndex == imgLen-2){
120                 btnIndex = 0
121             }
122             if(picIndex == imgLen){
123                 picIndex = 2
124             }
125 
126             $(this).css('background-color','#f6f').siblings().css('background-color','#faf');
127 
128             console.log(index);
129             $('.pic_list').stop(true).animate({'margin-left':-index*imgWitdh + 'px'});
130 
131             //繼續週期
132             setTimeClose = setTimeout(function(){
133                 setInterValue = setInterval(function(){
134 
135                     movie()
136                     btnIndex++;
137                     picIndex++;
138                     if(btnIndex == imgLen-2){
139                         btnIndex = 0
140                     }
141                     if(picIndex == imgLen){
142                         picIndex = 2
143                     }
144 
145                 },2000);
146             },2000);
147 
148 
149         });
150 
151         //待定返回
152         return {
153 
154         }
155 
156     })();
157 
158 
159 
160 });