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

浏览数：48 / 时间：2015年06月09日

自己前天，也就是1月8日的时候早上自己写了一个图片滚动轮播。

其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播，一直到现在也没有真正的写好，这次写得差不多了。

但是还有两个问题

没有做左右按钮效果
没有写成面向对象

代码先放上来存着，后续还会加上左右按钮并且试着写成面向对象。

javascript部分:

 1 $(function(){
 2             var index;
 3 
 4             var list_name = ‘#‘ + ‘slideImg‘; //图片ul的ID名
 5             var offset = $(list_name).find(‘img:first‘).width(); //图片宽度作为偏移量
 6             var autoTime = 3000;  //设置周期滚动时间
 7             var li_num = $(list_name).find(‘li‘).length;  //获取总共的li数量
 8             var ul_btn_width = $(‘#btn‘).width();
 9 
10 
11             $(list_name).css(‘margin-left‘,-offset + ‘px‘); //默认从第二张开始显示
12             $(‘#btn‘).css(‘left‘,(offset-ul_btn_width)/2);  //使按钮组水平居中
13 
14             function imgMovie(){
15                 //ulMarLeft获取当前的marginleft值
16                 var ulMarLeft = $(list_name).css(‘margin-left‘);
17                     ulMarLeft = -parseInt(ulMarLeft);
18 
19                 //处理按钮的状态。
20                 //判断图片是否显示到了最后一张(第五张)
21                 if(ulMarLeft == (li_num-2)*offset){
22                     //瞬间使当前图片变为还未偏移过的图片(即第1张)，使得经过imgMovie()函数后，图片是从第2张开始显示
23                     $(list_name).css(‘margin-left‘, 0);
24                     $(list_name).stop().animate({‘margin-left‘:‘-=‘+offset+‘px‘});
25 
26                     //去掉按钮所有当前状态
27                     $(‘#btn‘).find(‘.current‘).removeClass(‘current‘);
28                     //给第一个按钮显示当前状态
29                     $(‘#btn‘).find(‘li‘).eq(0).addClass(‘current‘);
30                 }else{
31 
32                     //图片滚动到下一张
33                     $(list_name).stop().animate({‘margin-left‘:‘-=‘+offset+‘px‘});
34                     //让下一个按钮变为当前，其他按钮变为非当前
35                     $(‘#btn‘).find(‘.current‘).next().addClass(‘current‘).siblings().removeClass(‘current‘);
36                 }
37 
38             }
39 
40 
41             var Timer = setInterval(function(){imgMovie();},autoTime);
42 
43 
44 
45             $(‘#btn‘).find(‘li‘).mouseover(function(){
46 
47                 var k = $(this).index();
48                 $(‘#btn‘).find(‘li‘).eq(k).addClass(‘current‘).siblings().removeClass(‘current‘);
49                 $(list_name).stop().animate({‘margin-left‘:-(k+1)*offset + ‘px‘});
50 
51             });
52 
53 
54 
55 })

css部分:

 1 *{
 2             padding: 0;
 3             margin: 0;
 4         }
 5         #slideImg{
 6             width: 4254px;
 7         }
 8         li{
 9             list-style: none;
10             height: 300px;
11             width: 709px;
12             float: left;
13         }
14         .pic-wrapper{
15             height: 300px;
16             width: 709px;
17             overflow: hidden;
18             position: relative;
19             margin: 0 auto;
20         }
21         .slide-scroll-con{
22             height: 300px;
23             width: 709px;
24             left: 0;
25             position: absolute;
26             top: 0;
27             z-index: 0;
28         }
29         #btn{
30             position: absolute;
31             bottom: 10px;
32             left: auto;
33         }
34         #btn li{
35             float: left;
36             width: 10px;
37             height: 10px;
38             border-radius: 5px;
39             background: #cccccc;
40             margin-left: 5px;
41         }
42         #btn li.current{
43             background: #ff6600;

html部分:

 1 <body>
 2 <div class="pic-wrapper">
 3     <div class="slide-scroll-con">
 4         <ul id="slideImg">
 5             <li><a target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/lostk/648105/o_goods01.jpg"/> </a> </li>
 6             <li><a target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/lostk/648105/o_goods02.jpg"/> </a> </li>
 7             <li><a target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/lostk/648105/o_goods03.jpg"/> </a> </li>
 8             <li><a target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/lostk/648105/o_goods04.jpg"/> </a> </li>
 9             <li><a target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/lostk/648105/o_goods01.jpg"/> </a> </li>
10             <li><a target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/lostk/648105/o_goods02.jpg"/> </a> </li>
11         </ul>
12         <ul id="btn">
13             <li class="current"></li>
14             <li></li>
15             <li></li>
16             <li></li>
17         </ul>
18     </div>
19 </div>
20 </body>