原生js实现轮播图

 1 <div class="sowingMap">
 2     <ul class="imgPart">
 3         <li class="imgSwitch imgShow"><img src="img/1.jpg"/></li>
 4         <li class="imgSwitch"><img src="img/2.jpg"/></li>
 5         <li class="imgSwitch"><img src="img/3.jpg"/></li>
 6         <li class="imgSwitch"><img src="img/4.jpg"/></li>
 7         <li class="imgSwitch"><img src="img/5.jpg"/></li>
 8     </ul>
 9     <div class="spotPart">
10         <p class="spotColor"></p>
11         <p></p>
12         <p></p>
13         <p></p>
14         <p></p>
15     </div>
16     <div class="loopChange">
17         <p class="preImg">&lt;</p>
18         <p class="nextImg">&gt;</p>
19     </div>
20 </div>

 1 //定义自动轮播的定时器
 2 var startLoop = null;
 3 //获取所有的li 和 p标签
 4 var li_v = document.querySelectorAll("li");
 5 var p_v = document.querySelectorAll(".spotPart p");
 6 var sowingMap = document.querySelector(‘.sowingMap‘);
 7 var p_change = document.querySelectorAll(‘.loopChange p‘);
 8 //业务1：实现3s钟自动循环切换图片,图片切换时提示点跟随切换
 9 var num = 0;
10 function loopSetInterval() {
11     clearInterval(startLoop);
12     startLoop = setInterval(function() {
13         for(var i = 0; i < li_v.length; i++) {
14             li_v[i].setAttribute("class", "imgSwitch");
15             p_v[i].setAttribute("class", " ");
16         }
17         if(num >= li_v.length - 1) {
18             num = 0;
19         } else {
20             num++;
21         }
22         li_v[num].setAttribute("class", "imgSwitch imgShow");
23         p_v[num].setAttribute("class", "spotColor");
24     }, 3000);
25 }
26 loopSetInterval();
27 
28 //业务2：鼠标划到图片上，轮播图停止自动切换，划出后继续播放
29 for(var i = 0; i < li_v.length; i++) {
30     li_v[i].onmouseover = function() {
31         clearInterval(startLoop);
32     }
33     li_v[i].onmouseout = function() {
34         loopSetInterval();
35     }
36 }
37 
38 //业务三：指示点划过切换对应的图片，图片切换时提示点跟随切换
39 for(var i = 0; i < p_v.length; i++) {
40     p_v[i].index = i;
41     p_v[i].onmouseover = function() {
42         clearInterval(startLoop);
43         for(var i = 0; i < li_v.length; i++) {
44             li_v[i].setAttribute("class", "imgSwitch");
45             p_v[i].setAttribute("class", " ");
46         }
47         this.setAttribute("class", "spotColor");
48         li_v[this.index].setAttribute("class", "imgSwitch imgShow");
49     }
50     p_v[i].onmouseout = function() {
51         loopSetInterval();
52     }
53 }
54 
55 //业务四：点击上一页下一页切换
56 sowingMap.onmouseover = function () {
57     for (var i=0;i<p_change.length;i++) {
58         p_change[i].style.display = "block";        
59     }
60 }
61 sowingMap.onmouseout = function () {
62     for (var i=0;i<p_change.length;i++) {
63         p_change[i].style.display = "none";        
64     }
65 }
66 //点击切换上一张
67 p_change[0].onclick = function  () {
68     console.log(num)
69     for(var i = 0; i < li_v.length; i++) {
70         li_v[i].setAttribute("class", "imgSwitch");
71         p_v[i].setAttribute("class", " ");
72     }
73     if (num <= 0) {
74         num = 4;
75         li_v[num].setAttribute("class", "imgSwitch imgShow");
76         p_v[num].setAttribute("class", "spotColor");
77     } else if(num <= 4){
78         li_v[num-1].setAttribute("class", "imgSwitch imgShow");
79         p_v[num-1].setAttribute("class", "spotColor");
80         num--;
81     }
82 }
83 //点击切换下一张
84 p_change[1].onclick = function  () {
85     console.log(num)
86     for(var i = 0; i < li_v.length; i++) {
87         li_v[i].setAttribute("class", "imgSwitch");
88         p_v[i].setAttribute("class", " ");
89     }
90     if (num >= 4) {
91         num = 0;
92         li_v[num].setAttribute("class", "imgSwitch imgShow");
93         p_v[num].setAttribute("class", "spotColor");
94     } else if(num >= 0){
95         li_v[num+1].setAttribute("class", "imgSwitch imgShow");
96         p_v[num+1].setAttribute("class", "spotColor");
97         num++;
98     }
99 }