JS:轮播图终极版
轮播图:可触发效果
:1、按箭头符号可左右切换图片
2、到最后一张的下一张是开头第一张;开头第一张的前一张是最后一张
3、鼠标放在轮播图上时轮播图停止定时器;鼠标移开定时器继续开启
注意:图片需要自己准备且对应
部分HTML代码:
轮播图点击切换 * { box-sizing: border-box; } .slider { width: 560px; height: 400px; overflow: hidden; } .slider-wrapper { width: 100%; height: 320px; } .slider-wrapper img { width: 100%; height: 100%; display: block; } .slider-footer { height: 80px; background-color: rgb(100, 67, 68); padding: 12px 12px 0 12px; position: relative; } .slider-footer .toggle { position: absolute; right: 0; top: 12px; display: flex; } .slider-footer .toggle button { margin-right: 12px; width: 28px; height: 28px; appearance: none; border: none; background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 4px; cursor: pointer; } .slider-footer .toggle button:hover { background: rgba(255, 255, 255, 0.2); } .slider-footer p { margin: 0; color: #fff; font-size: 18px; margin-bottom: 10px; } .slider-indicator { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; } .slider-indicator li { width: 8px; height: 8px; margin: 4px; border-radius: 50%; background: #fff; opacity: 0.4; cursor: pointer; } .slider-indicator li.active { width: 12px; height: 12px; opacity: 1; }对人类来说会不会太超前了?
JavaScript代码:
// 获取p元素 const p = document.querySelector('.slider-footer p') //获取footer const footer = document.querySelector('.slider-footer') // 获取右边按钮 const next = document.querySelector('.next') // 获取左边按钮 const prev = document.querySelector('.prev') let i = 0 // while (true) { //渲染对应的数据 function move(i) { img.src = sliderData[i].url p.innerHTML = sliderData[i].title // 获取元素 footer.style.backgroundColor = sliderData[i].color // 先删掉之前的active document.querySelector('.slider-indicator .active').classList.remove('active') // 只让当前的litianjia active document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active') } //定时器函数 function timer() { } next.addEventListener('click', function () { // if (i >= 8) // i = 0 // i++ i++ i = i >= sliderData.length - 1 ? 0 : i // 调用渲染函数 move(i) }) prev.addEventListener('click', function () { // if (i
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...