通过克隆实现无缝滚动轮播图

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>简单轮播图</title>
  9     <style>
 10         *{
 11             margin: 0;
 12             padding: 0;
 13         }
 14         /*//易错点：进行动画的ul必须进行绝对定位才能够进行动画移动；*/
 15         ul{
 16             position: absolute;
 17             left: 0;
 18             top: 0;
 19         }
 20         li{
 21             float: left;
 22             list-style: none;
 23         }
 24         .all{
 25             width: 500px;
 26             height: 200px;
 27             margin: 100px auto;
 28             overflow: hidden;
 29             position: relative;
 30         }
 31         .all ul{
 32             width: 3000px;
 33             height: 200px;
 34 
 35         }
 36         img{
 37             vertical-align:top;
 38         }
 39         ol{
 40             width: 130px;
 41             position: absolute;
 42             bottom: 10px;
 43             right: 10px;
 44         }
 45         ol li{
 46             width: 15px;
 47             height: 15px;
 48             background: #fff;
 49             color:#000;
 50             float: left;
 51             margin-left: 10px;
 52             text-align: center;
 53             line-height: 15px;
 54         }
 55        li.current{
 56             background: yellow;
 57         }
 58     </style>
 59 </head>
 60 <body>
 61 <!--利用克隆的方法-->
 62 <!--img{w500;h200}-->
 63     <div class="all" id="all">
 64         <div class="screen">
 65             <ul id="ul">
 66                 <li><img src="images/taobao/1.jpg" alt=""></li>
 67                 <li><img src="images/taobao/2.jpg" alt=""></li>
 68                 <li><img src="images/taobao/3.jpg" alt=""></li>
 69                 <li><img src="images/taobao/4.jpg" alt=""></li>
 70                 <li><img src="images/taobao/5.jpg" alt=""></li>
 71             </ul>
 72         </div>
 73     </div>
 74 </body>
 75 </html>
 76 <script>
 77     function animate(obj,target){
 78         clearInterval(obj.timer);  // 先清除定时器
 79         var speed = obj.offsetLeft < target ? 15 : -15;  // 用来判断向左走还是向右走；
 80         obj.timer = setInterval(function() {
 81             var result = target - obj.offsetLeft; // 因为最终他们的差值不会超过15；
 82             obj.style.left = obj.offsetLeft + speed + "px";
 83             if(Math.abs(result)<=15)  // 如果差值不小于15 说明到位置了
 84             {
 85                 clearInterval(obj.timer);
 86                 obj.style.left = target + "px";  // 如，95-100之间有5像素差距； 我们直接跳转目标位置
 87             }
 88         },10)
 89     }
 90     window.onload=function() {
 91         function $(id) {
 92             return document.getElementById(id)
 93         };
 94         var box = $('all');
 95         var ul = $('ul');
 96         var ulLis = ul.children;
 97         // 克隆第一张li,并添加给ul
 98         ul.appendChild(ul.children[0].cloneNode(true));
 99         // 创建ol和li;
100         var ol = document.createElement('ol');
101         box.appendChild(ol);
102         for (var i = 0; i < ulLis.length - 1; i++) {
103             var li = document.createElement('li');
104             li.innerHTML = i + 1;
105             ol.appendChild(li);
106         }
107         ol.children[0].className = 'current';
108         var olLis = ol.children;
109         for (var i = 0; i < olLis.length; i++) {
110             olLis[i].index = i;
111             olLis[i].onmouseover = function () {
112                 for (j = 0; j < olLis.length; j++) {
113                     olLis[j].className = '';
114                 }
115                 this.className = 'current';
116                 animate(ul, -this.index * 500);
117             }
118         }
119         // 添加定时器
120         var timer=null;
121         var key=0;
122         var square=0;
123         timer=setInterval(autoplay,1000);
124         function autoplay() {
125             key++;
126             if(key>ulLis.length-1){
127                 ul.style.left=0;
128                 key=1;
129             }
130             animate(ul,-key*500);
131             square++;
132             if(square>olLis.length-1){
133                 square=0;
134             }
135             for(var i=0;i<olLis.length;i++){
136                 olLis[i].className='';
137             }
138             olLis[square].className='current';
139         }
140         box.onmouseover=function(){
141             clearInterval(timer);
142         };
143         box.onmouseout=function (ev) {
144             timer=setInterval(autoplay,1000);
145         }
146     }
147 </script>