jQuery仿淘宝图片无缝滚动轮播

浪子不回头ぞ 提交于 2020-01-03 12:49:09

自己前天,也就是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 });
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!