1         var timer = null;
 2         var sliderPage = document.getElementsByClassName('sliderPage')[0];
 3         var moveWidth = sliderPage.children[0].offsetWidth;   //sliderPage的子节点第n位的width等于movewidth
 4         var num = sliderPage.children.length - 1;  //li的长度减去1，相当于4-1=3；刚好到了第三张也就是最后一张
 5         var leftBtn = document.getElementsByClassName('leftBtn')[0]; // 获取左按钮事件
 6         var rightBtn = document.getElementsByClassName('rightBtn')[0];    //获取右按钮事件
 7         var lock = true;  //设置一个锁使定时器不发生冲突，true的时候可以进入，false就把锁锁上；
 8                           //相当于一个厕所，很多人在排队， 没进入前等于true，第一个进去之后把锁锁上(也就是等于false)这样别人就进不去，
 9                           //出来的时候把锁打开(也就是等于true)方便下一个进入
10
11         var index = 0; //小圆点初始值等于0
12         var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');//选出sliderIndex下面的所有span标签
13
14
15         // 点击向左
16         leftBtn.onclick = function () {
17             autoMove('right->left');   //当点击leftBtn的时候传入'right->left'这个实参
18         }
19
20
21
22         // 点击向右
23         rightBtn.onclick = function () {
24             autoMove('left->right');   //当点击rightBtn的时候传入'left->right'这个实参
25         }
26
27
28         //点击小圆点跳转至相应的图片和小圆点位置
29         for (var i = 0; i < oSpanArray.length; i++) {   //先循环拿到3个span标签，也就是每个小圆点的位置
30             (function (myIndex) {
31                 oSpanArray[i].onclick = function () { //给每一个小圆点注册一个点击事件
32                     lock = false;  //点击后关闭锁，防止没执行完再次运行点击事件
33                     clearInterval(timer); //清理定时器，防止没执行完再次开启定时器
34                     index = myIndex; //myIndex和i形参实参相统一，myIndex付给index
35                     startMove(sliderPage,{ left: - index * moveWidth }, //执行函数让sliderPage(也就是ul)移动
36
37                               function () { //再执行回调函数
38                                 lock = true; //执行完再次开启锁，方便下次开启点击事件
39                                 timer = setInterval(autoMove, 1500); //开启定时器，让图片继续运动
40                                 changeIndex(index); //执行小圆点函数，让小圆点每次点击同步
41                     })
42                 }
43             })(i)
44         }
45
46         function autoMove(dierction) {  // 函数形参传入dierction
47
48             if (lock) {  //lock = true时进入判断
49                 lock = false;   //进来后等于false，判断之后再次开启锁
50                 clearInterval(timer);  // 每次进入autoMove函数的时候立即关闭定时器，执行下面代码之后再次开启定时器。
51                                         // 相当于执行一次轮播一张图片之后再次开启一次定时器，再次轮播一张图片，无限循环。
52                 if (!dierction || dierction == 'left->right') {     //不传入参数时dierction等于undefined !undfined时等于true，进入if语句。
53                                                                     //点击左右函数的时候传入实参
54                     index++; //小圆点位置每次加1
55                     startMove(sliderPage,{ left: sliderPage.offsetLeft - moveWidth },  //执行函数startMove,sliderPage里面left当前值减去li的宽度，所以图片移动
56                              function () {  //再执行回调函数
57                                 if (parseInt(getStyle(sliderPage, 'left')) == -num * moveWidth) {  // 判断当前left的值是否等于最后一个，也就是到了最后一张图片
58                                     index = 0; // 当到了最后一张的时候，小圆点跳转到第一张，小圆点下角标为0，也就是等于第一张图片。
59                                     sliderPage.style.left = '0px';  // 如果等于到了最后一张图片的话，就当前left值等于0。 === 回到第一张图片
60                                 }
61                                 timer = setInterval(autoMove, 1500);  // 每次执行结束之后再次开启定时器
62                                 lock = true; //出去前等于true，方便下次进入，使定时器不会发生冲突同时运行多个定时器
63                                 changeIndex(index); //执行小圆点
64                         });
65
66                 } else if (dierction == 'right->left') { //当点击right按钮后实参传入'right->left',进入if语句执行以下代码
67                     if (sliderPage.offsetLeft == 0) {  //如果开始执行的时候当前位置等于0
68                         sliderPage.style.left = - num * moveWidth + 'px';  //那就把最后一张的位置付给他，让他跳转至最后一张
69                         index = num;   //如果刚开始的时候，当前位置等于0点击向left那么跳转到最后一张图片的位置，所以直接index的下角标直接等于最后一张的位置
70                     }
71                     index--;  //小圆点位置每次减1
72                     startMove(sliderPage,{ left: sliderPage.offsetLeft + moveWidth },
73                             function () {
74                             timer = setInterval(autoMove, 1500); //每次执行之后再次开启定时器
75                             lock = true; //出去前等于true，方便下次进入，使定时器不会发生冲突同时运行多个定时器
76                             changeIndex(index); //执行小圆点
77                         })
78                 }
79             }
80         }
81         function changeIndex(_index) {
82             for (var i = 0; i < oSpanArray.length; i++) {
83                 oSpanArray[i].className = ''; //循环小圆点让每个位置的classname等于空
84             }
85             oSpanArray[_index].className = 'active'; //因为原始值是0，所以第一个有classname样式，每次index加数，下角标改变时classname也同步改变
86         }
87         timer = setInterval(autoMove, 1500); // 设置一个定时器，每1500毫秒运行一次autoMove函数