JS实现图片轮播（方法一）

article/2025/11/10 9:10:29

效果如下：
在这里插入图片描述
下面是具体的实现代码：

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播</title><link rel="stylesheet" href="index.css"><script src="index.js"></script>
</head>
<body><div class="lunbo"><div class="scroll"><!-- 图片展示 --><img src="image/1.png" class="img current"><img src="image/2.png" class="img"><img src="image/3.png" class="img"><img src="image/4.png" class="img"><img src="image/5.png" class="img"><!-- 左右箭头的展示 --><div class="left"></div><div class="right"></div>    <!-- 小圆点展示 --><div class="dots"><span class="square"></span><span></span><span></span><span></span><span></span></div></div></div>
</body>
</html>

CSS代码

.lunbo {width: 100%;margin:0;text-align: center;
}.lunbo .scroll {position: relative;display: inline-block;width: 100%;
}.lunbo .scroll .img {display: none;width: 100%;height: 100%;
}.lunbo .scroll .current {display: block;
}.scroll .left {position: absolute;top: 50%;left: 100px;background-image: url('image/left.png');background-position: -83px 0;width: 41px;height: 69px;cursor: pointer;transform: translateY(-50%);
}.scroll .right{position: absolute;top: 50%;right: 100px;background-image: url('image/right.png');background-position: -123px 0;width: 41px;height: 69px;cursor: pointer;transform: translateY(-50%);
}.dots {position: absolute;bottom: 10px;left: calc(50% - 80px);width: 160px;
}.dots>span {display: inline-block;box-sizing: border-box;width: 20px;height: 20px;border: 2px solid rgba(170,170,170,0.3);border-radius: 15px;cursor: pointer;
}/* 小圆点的颜色 */
.dots .square {background-color: #f30404;
}

JS代码

window.addEventListener('load', function() {//获取左右箭头var leftArrow = this.document.querySelector('.left');var rightArrow = this.document.querySelector('.right');// 获取图片 和 小点var imgs = this.document.querySelectorAll('.img');var dots = this.document.querySelector('.dots').querySelectorAll('span');// 给图片添加index 属性，方便判断当前的图片是哪一张for (let i = 0; i < imgs.length; i++) {imgs[i].setAttribute('data-index', i);}// 获取当前图片 和 图片的数组下标var current = this.document.querySelector('.current');var currentIndex = current.getAttribute('data-index');// 左箭头的点击事件，点击了就返回前一张图片 // 如果当前图片为第一张那么需要更换到最后一张图片也就是第四张leftArrow.addEventListener('click', function() {if (currentIndex > 0) {imgs[currentIndex].classList.remove('current');dots[currentIndex].classList.remove('square');imgs[--currentIndex].classList.add('current');dots[currentIndex].classList.add('square');} else {imgs[currentIndex].classList.remove('current');dots[currentIndex].classList.remove('square');currentIndex = 4;imgs[currentIndex].classList.add('current');dots[currentIndex].classList.add('square');}});// 点击右箭头下一张图片切换// 如果当前为第五张图片，那么切换回第一张图片rightArrow.addEventListener('click', changeImage);//2秒切换一张照片var timer = this.setInterval(changeImage, 2000);function changeImage(){if (currentIndex < 4) {imgs[currentIndex].classList.remove('current');dots[currentIndex].classList.remove('square');imgs[++currentIndex].classList.add('current');dots[currentIndex].classList.add('square');} else {imgs[currentIndex].classList.remove('current');dots[currentIndex].classList.remove('square');currentIndex = 0;imgs[currentIndex].classList.add('current');dots[currentIndex].classList.add('square');}}// 小圆点的点击事件for (let k = 0; k < dots.length; k++) {dots[k].setAttribute('data-index', k);dots[k].addEventListener('click', function() {var index = this.getAttribute('data-index');if (index != currentIndex) {imgs[currentIndex].classList.remove('current');dots[currentIndex].classList.remove('square');imgs[index].classList.add('current');dots[index].classList.add('square');currentIndex = index;}})}});