html部分： <div class="slider"> <div class="slider-wrapper"> <img src="./images/slider01.jpg" alt="" /> </div> <div class="slider-footer"> <p>第一张轮播图描述</p> <ul class="slider-indicator"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="toggle"> <button class="prev"><</button> <button class="next">></button> </div> </div> </div> js部分： const sliderData = [ { url: './images/01.jpg', title: '第一张轮播图描述', color: 'rgb(100, 67, 68)' }, { url: './images/02.jpg', title: '第二张轮播图描述', color: 'rgb(43, 35, 26)' }, { url: './images/03.jpg', title: '第三张轮播图描述', color: 'rgb(36, 31, 33)' }, { url: './images/04.jpg', title: '第四张轮播图描述', color: 'rgb(139, 98, 66)' }, { url: './images/05.jpg', title: '第五张轮播图描述', color: 'rgb(67, 90, 92)' }, { url: './images/06.jpg', title: '第六张轮播图描述', color: 'rgb(166, 131, 143)' }, { url: './images/07.jpg', title: '第七张轮播图描述', color: 'rgb(53, 29, 25)' }, { url: './images/08.jpg', title: '第八张轮播图描述', color: 'rgb(99, 72, 114)' }, ] const img = document.querySelector('.slider-wrapper img') const p = document.querySelector('.slider-footer p') let i = 0 // 信号量 控制图片的张数 // 开启定时器 setInterval(function () { i++ // 衔接位置 一共八张图片，到了最后一张就是 8， 数组的长度就是 8 if (i >= sliderData.length) { i = 0 } // 更换图片路径 img.src = sliderData[i].url // 修改 p里面的文字描述 p.innerHTML = sliderData[i].title // 小圆点 // 先删除以前的active document.querySelector('.slider-indicator .active').classList.remove('active') // 更换当前li为active的li document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active') }, 1000)
标签：轮播,title,url,color,rgb,images,定时 From： https://www.cnblogs.com/aleifighting/p/17993061