banner无缝滚动动画，支持左右按钮和小点

Posted 2020-09-17 努力┗(｀O′)┛奋斗！

html：

 1 <div class="box">
 2 　　<ul>
 3 　　　　<li class="img_cur" >
 4 　　　　　　<a href="#">
 5 　　　　　　　　<img src="img/banner.jpg">
 6 　　　　　　</a>
 7 　　　　</li>
 8 　　　　<li>
 9 　　　　　　<a href="#">
10 　　　　　　　　<img src="img/banner2.jpg">
11 　　　　　　</a>
12 　　　　</li>
13 　　　　<li>
14 　　　　　　<a href="#">
15 　　　　　　　　<img src="img/banner3.jpg">
16 　　　　　　</a>
17 　　　　</li>
18 　　　　<li>
19 　　　　　　<a href="#">
20 　　　　　　　　<img src="img/banner4.jpg">
21 　　　　　　</a>
22 　　　　</li>
23 　　</ul>
24 　　<ol>
25 　　　　<li class="cur"></li>　　　　//这里li只写一个是为了js加入其它的li，为了以后再加入图片时不会再来增加li
26 　　</ol>
27 　　<div class="left_btn btn"><</div>
28 　　<div class="right_btn btn">></div>
29 </div> 

CSS：

 1 .box{
 2 　　width: 844px;
 3 　　height: 380px;　　
 4 　　margin: 100px auto;
 5 　　overflow: hidden;
 6 　　position: relative;
 7 }
 8 .box>ul{
 9 　　position: absolute;
10 　　top: 0px;
11 　　left: 0px;
12 　　clear: both;
13 　　overflow: hidden;
14 }
15 .box>ul>li{
16 
17 　　float: left;
18 }
19 .btn{
20 　　position: absolute;
21 　　top: 0px;
22 　　bottom: 0px;
23 　　margin: auto 0;
24 　　width: 50px;
25 　　height: 50px;
26 　　text-align: center;
27 　　line-height: 50px;
28 　　background: black;
29 　　color: white;
30 }
31 .left_btn{
32 　　left: 0;
33 }
34 .right_btn{
35 　　right: 0;
36 }
37 .box>ol{
38 　　clear: both;
39 　　overflow: hidden;
40 　　position: absolute;
41 　　bottom: 10px;
42 　　left: 0px;
43 　　right: 0px;
44 　　margin: 0 auto;
45 }
46 .box>ol>li{
47 　　width: 10px;
48 　　height: 10px;
49 　　margin-right: 10px;
50 　　background: white;
51 　　float: left;
52 }
53 .box>ol>li.cur{
54 　　background: red;
55 }

注意：左按钮与右按钮和ol使用的垂直水平居中不支持ie8以下。可参考我的另外篇文章：http://www.cnblogs.com/zjjDaily/p/5952723.html

js:

 1 var idx=0;     //定义一个全局变量
 2 $(function(){
 3 
 4 　　var clone_img=$(".box>ul>li").eq(0).clone().removeClass("img_cur");    //img_cur表示索引所在位置。克隆第一个li元素并去掉img_cur
 5 　　$(".box>ul").append(clone_img);     //把它加到最后，克隆该元素是为了在动画执行到最后一张的时候，left值突然置为0，动画会闪动，为了防止这种情况，就添加第一个元素到最后，这样就不会看到闪动了，欺骗了眼睛。。。
 6 
 7 　　var li_len=$(".box>ul>li").size();     //获取li的个数
 8 　　var li_w=$(".box>ul>li").width();      //获取每个li的宽度
 9 　　var ul_w=li_len*li_w;　　　　　　　　
10 　　$(".box>ul").css("width",ul_w);　　　　//设置ul的宽度
11 
12 
13 　　if(li_len>1){                                               //当li的个数大于一个时才添加
14 　　　　for(var i=0;i<(li_len-2);i++){　　　　　　　　//循环添加ol里面li的个数，因为原来有一个，所以要减2
15 　　　　　　$("ol").append("<li>"+"</li>")　　　　　　
16 　　　　}
17 　　}
18 　　var ol_len=$("ol>li").size();
19 　　var ol_marg=parseInt($("ol>li").css("margin-right"));        //因为每个ol里面的li都有margin-right，所以要算进去
20 　　var ol_li_w=$("ol>li").width();
21 　　var ol_w=ol_len*(ol_li_w+ol_marg);
22 　　$(".box>ol").css("width",ol_w);　　　　　　　　　　　　　　　//设置ol的宽度
23 
24 $(".box").hover(function(){
25 　　clearInterval(timer);             
26 },function(){
27 　　timer=setInterval(function(){　　　　　//注意，这里timer前面一定不要加var哦，不然反复移入移出会导致动画越来越快。因为加了var之后每次移出开启定时器的时候它都会定义一个定时器，都会加1，之后就累加了。一开始是var timer=1，之后var timer=2.
28 　　　　img_banner("right");　　
29 　　},2000)
30 })
31 
32 var timer=setInterval(function(){
33 　　img_banner("right");　　　　　　　　　　　　　　　　　　//此时传入函数的参数为right是因为自动轮播的效果和右按钮点击一样，动画往左移动。
34 },2000)
35 
36 
37 $(".left_btn").click(function(){
38 　　img_banner("left");
39 })
40 $(".right_btn").click(function(){
41 　　img_banner("right");
42 })
43 
44 $(".box>ol>li").click(function(){
45 　　var this_idx=$(this).index();        //获取当前点击元素的索引
46 
47 　　var li_len=$(".box>ul>li").size();
48 　　var li_w=$(".box>ul>li").width();
49 　　var left= -this_idx*li_w;                       //获取ul要移动的left的值
50 
51 　　idx=this_idx;                                    //把当前索引值赋给idx，让动画获取正确的索引值
52 　　$(this).addClass(\'cur\').siblings().removeClass("cur");　　　　//为当前点击的元素加上cur
53 　　$(".box>ul").stop(true,true).animate({"left":left},1500,function(){
54 　　　　$(\'.box>ul>li\').eq(idx).addClass(\'img_cur\').siblings().removeClass("img_cur");      //为当前正确索引的ul里的li添加img_cur
55 　　});
56 })
57 
58 })
59 function img_banner(direct){　　　　　　　　　　　　　　　　　//传入一个参数
60 
61 　　var li_len=$(".box>ul>li").size();
62 　　var li_w=$(".box>ul>li").width();
63 　　if(direct=="left"){                                                         //如果是左按钮点击，动画往右移动的话，idx就自减
64 　　　　if(idx==0){　　　　　　　　　　　　　　　　　　　　//如果当前索引为0
65 　　　　　　$(".box>ul").css("left",-(li_len-1)*li_w);　　　　　　//设置ul的left值，大小为除开克隆元素的ul的宽度值
66 　　　　　　idx=li_len-1;　　　　　　　　　　　　　　　　//此时索引为克隆元素的索引
67 　　　　}
68 　　　　idx--;　　　　　　　　　　　　　　　　//左按钮点一次，索引就减一
69 　　}else{　　　　　　　　　　　　　　　　　　　　　　　　　　//如果是右按钮点击，动画往左移动的话
70 　　　　if(idx==li_len-1){　　　　　　　　　　　　　　　　　　　//　当索引达到克隆元素的位置时
71 　　　　　　$(".box>ul").css("left",0);　　　　　　　　　　　　　　//整个ul的left值设置为0
72 　　　　　　idx=0;　　　　　　　　　　　　　　　　　　　　　　　　//此时索引值也为0
73 　　　　}
74 　　　　idx++;　　　　　　　　　　　　　　//右按钮点一次，索引就加一
75 
76 　　}
77 　　var left=-idx*li_w;　　　　　　　　　　//此时ul需要移动的left值
78 　　$(".box>ul").stop(true,true).animate({"left":left},1500,function(){
79 　　　　$(\'.box>ul>li\').eq(idx).addClass(\'img_cur\').siblings().removeClass("img_cur");
80 　　});
81 　　if(idx==li_len-1){　　　　　　　　　　//当索引值达到克隆元素的位置时，此时应该是ol的第一个li元素加上cur。
82 　　　　$(".box>ol>li").eq(0).addClass(\'cur\').siblings().removeClass("cur");
83 　　}else{
84 　　　　$(".box>ol>li").eq(idx).addClass(\'cur\').siblings().removeClass("cur");
85 　　}
86 }