jQuery仿淘宝图片无缝滚动轮播
自己前天，也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery)。
其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播，一直到现在也没有真正的写好，这次写得差不多了。
但是还有两个问题
- 没有做左右按钮效果
- 没有写成面向对象
代码先放上来存着，后续还会加上左右按钮并且试着写成面向对象。
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 });
