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

Posted 努力┗(`O′)┛奋斗!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了banner无缝滚动动画,支持左右按钮和小点相关的知识,希望对你有一定的参考价值。

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 }

 

以上是关于banner无缝滚动动画,支持左右按钮和小点的主要内容,如果未能解决你的问题,请参考以下文章

banner轮播无缝滚动万金油jq代码

图片左右滚动

Jquery+css实现图片无缝滚动轮播

记录一个小点react+antd:支持css3的transition动画的一些属性列表

常用JS图片滚动(无缝平滑上下左右滚动)代码大全

无缝滚动