首页 > 代码库 > 无限循环轮播图之JS部分(原生JS)
无限循环轮播图之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>
无限循环轮播图之JS部分(原生JS)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。