开发笔记:原生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"><p>
18 <p class="nextImg">>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 ) {
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 ) {
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 ) {
40 p_v[i].index = i;
41 p_v[i].Onmouseover= function() {
42 clearInterval(startLoop);
43 for(var i = 0; 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) {
58 p_change[i].style.display = "block";
59 }
60 }
61 sowingMap.Onmouseout= function () {
62 for (var i=0;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 ) {
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 ) {
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 }