带无缝滚动的轮播图（含JS运动框架）-简洁版

Posted 2020-08-24

昨天写的神逻辑，今天终于解决，经过大家的商讨，终于研究出来一套简单的代码！！！

js代码如下：

 1 <script>
 2     window.onload = function() {
 3         var oWrap = document.getElementById("wrap");
 4         var oBox = document.getElementById("box");
 5         var aBox = oBox.getElementsByTagName("li");
 6         var aBtn = document.getElementById("btn").getElementsByTagName("li");
 7         var oPrev = document.getElementById("prev");
 8         var oNext = document.getElementById("next");
 9         var iNow = 0;
10         var timer = null;
11 
12         oBox.innerhtml += oBox.innerHTML;
13         oBox.style.width = aBox[0].offsetWidth * aBox.length + "px";
14 
15         function tab(){
16             for(var i=0;i<aBtn.length;i++){
17                 aBtn[i].className = "";
18             }
19             move(oBox,{left:-aBox[0].offsetWidth*iNow});
20             //判断iNow是否大于红色圆扭得个数，若大于则需减去按钮的个数
21             if(iNow > aBtn.length-1){  //next中的情况，主要出现的是oBox后面的li
22                 aBtn[iNow-aBtn.length].className = "active";
23             }else{  //prev中的情况，主要出现的是oBox前面的li
24                 aBtn[iNow].className = "active";
25             }
26         }
27 
28         //next，当循环到最后一张图片时，返回到前面与它相同的那张图片
29         function next(){
30             iNow++;
31             if(iNow >aBox.length - 1){
32                 oBox.style.left = -oBox.offsetWidth/2 +aBox[0].offsetWidth + "px";
33                 iNow = aBtn.length;
34             }
35             tab();
36         }
37 
38         //prev，当循环到第一张图片时，返回到后面与它相同的那张图片
39         oPrev.onclick = function(){
40             iNow--;
41             if(iNow <0){
42                 oBox.style.left = -oBox.offsetWidth/2 + "px";
43                 iNow = aBtn.length - 1;
44             }
45             tab();
46         }
47 
48         oNext.onclick = next;
49 
50         timer = setInterval(next,2000);
51         oWrap.onmouseout = function(){
52             clearInterval(timer);
53             timer = setInterval(next,2000);
54         }
55         oWrap.onmouseover = function(){
56             clearInterval(timer);
57         }
58     }
59 </script>

今天的代码要简洁很多，逻辑相对昨天的也清晰不少，多种尝试，总会发现新的方法！！！