无限循环轮播图之JS部分（原生JS）

Posted 2020-08-25 NT.Wang

JS逻辑与框架调用

 1 <script type="text/javascript">
 2         var oBox = document.getElementById(‘box‘);
 3         var oPrev = document.getElementById(‘prev‘);
 4         var oNext = document.getElementById(‘next‘);
 5         var oUl = oBox.children[0];
 6         var aLi = oUl.children;
 7         var aBtn = document.getElementById(‘btn‘).children;
 8 
 9         aLi[0].style.left = 0;
10         var iNow = 0;
11         oNext.onclick = function(){
12             move(aLi[iNow],{left:-400});
13 
14             iNow++;
15             if (iNow == aLi.length) {
16                 iNow = 0;
17             }
18             aLi[iNow].style.left = 400+‘px‘;
19             move(aLi[iNow],{left:0});
20 
21             tab()
22         }
23 
24         oPrev.onclick = function(){
25             move(aLi[iNow],{left:400})
26             iNow--;
27             if (iNow < 0) {
28                 iNow = aLi.length-1;
29             }
30             aLi[iNow].style.left = -400+‘px‘;
31             move(aLi[iNow],{left:0})
32 
33             tab()
34         }
35 
36         for(var i = 0 ;i < aBtn.length ; i++){
37             (function(index){
38                 aBtn[i].onclick    = function(){
39                     if (index == iNow) {
40                         return;
41                     }else if (index < iNow ) {
42                         move(aLi[iNow],{left:400});
43         
44                         aLi[index].style.left = -400+‘px‘;
45                         move(aLi[index],{left:0})
46                     }else if (index > iNow) {
47                         move(aLi[iNow],{left:-400})
48                         aLi[index].style.left = 400+‘px‘;
49                         move(aLi[index],{left:0})
50                     }
51                     iNow = index
52                     tab();
53                 }
54             })(i);
55         }
56 
57 
58         function tab(){
59             for (var i = 0; i < aBtn.length; i++) {
60                 aBtn[i].className =‘‘;
61             }
62             aBtn[iNow].className = ‘on‘;
63         }
64     </script>