• 欢迎光临~

web APIs---定时器轮播图

开发技术 开发技术 2022-10-15 次浏览

开始删除前一个高亮圆点出现错误 

后发现切换至最后一张图时,因为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 APIs---定时器轮播图
喜欢 (0)
违法和不良信息举报电话:022-22558618 举报邮箱:dljd@tidljd.com