开始删除前一个高亮圆点出现错误
后发现切换至最后一张图时，因为num++的缘故，num已=0
通过num数值判断圆点的删除
1 // 判断圆点删除
2 // 判断非最后一幅图，删除前一个高亮圆点
3 if(num!=0){
4 gl[num-1].classList.remove('gl')
5 }
6 // num为0时，删除最后一个圆点
7 else{
8 gl[(arr.length)-1].classList.remove('gl')
9 }
附源代码
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <style>
10 div{
11 position: relative;
12 }
13 p{
14 position: absolute;
15 bottom: 2%;
16 left: 3%;
17 font-size: 20px;
18 color: white;
19 z-index: 99;
20 }
21 .box{
22 bottom: 2%;
23 left: 3%;
24 position: absolute;
25 }
26 .box span{
27 display: inline-block;
28 width: 10px;
29 height: 10px;
30 background-color: gainsboro;
31 border-radius: 50%;
32 }
33 .box span.gl{
34 background-color: red;
35 }
36
37 </style>
38 </head>
39
40 <body>
41 <div>
42 <img src="./img/1.jpg" alt="">
43 <p class="txt">11111</p>
44 <div class="box">
45 <span class="gl"></span>
46 <span></span>
47 <span></span>
48 </div>
49 </div>
50 <script>
51
52 let arr = [
53 { txt: '11111', url: './img/1.jpg' },
54 { txt: '22222', url: './img/2.jpg' },
55 { txt: '33333', url: './img/3.jpg' }
56 ]
57 // 获取标签元素信息
58 let img1 = document.querySelector('img')
59 let p1 = document.querySelector('p')
60 let gl = document.querySelectorAll('.box span')
61 let num = 0
62 function clk() {
63 num++
64 // 判断长度
65 if (num >= (arr.length)) {
66 num = 0
67 }
68
69 // 判断圆点删除
70 // 判断非最后一幅图，删除前一个高亮圆点
71 if(num!=0){
72 gl[num-1].classList.remove('gl')
73 }
74 // num为0时，删除最后一个圆点
75 else{
76 gl[(arr.length)-1].classList.remove('gl')
77 }
78
79
80 // 新增圆点
81 gl[num].classList.add('gl')
82 // 修改图片和文字
83 img1.src = `${arr[num].url}`
84 p1.innerText = `${arr[num].txt}`
85 }
86 // 调用定时函数
87 let bb = setInterval(clk, 1000)
88 </script>
89 </body>
90
91 </html>
标签：web,arr,轮播,删除,圆点,---,num,let,gl From： https://www.cnblogs.com/Ayako/p/16795069.html