无限循环轮播图之JS部分(原生JS)

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>
原文地址:https://www.cnblogs.com/NTWang/p/6239402.html