无限循环轮播图之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>

 

posted @ 2016-12-31 15:51  NT.Wang  阅读(1603)  评论(0)  编辑  收藏  举报