html+css+js实现轮播图

实现效果：

HTML部分

<div class="carousel"><div class="carousel-wrapper"><img src="./image/1.png" alt=""></div><ul class="carousel-indictor"><li class="active" data-id="0"></li><li data-id="1"></li><li data-id="2"></li><li data-id="3"></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div>

CSS部分

<style>*{margin: 0;padding: 0;box-sizing: border-box;}li{list-style: none;}button{border: none;outline: none;}.carousel{position: relative;width: 700px;height: 300px;margin: 50px auto;}.carousel-wrapper{width: 700px;height: 300px;}.carousel-wrapper img{width: 100%;height: 100%;}.carousel-indictor{position: absolute;bottom: 30px;left: 150px;width: 400px;height: 5px;display: flex;justify-content: space-between;} .carousel-indictor li{width: 85px;background-color: rgba(235, 239, 243);}.carousel-indictor li.active{background-color: #fff;}.toggle button{display: none;width: 50px;height: 50px;background-color: rgba(191, 201, 212,0.5);border-radius: 50%;color: #fff;font-size: 25px;}.carousel:hover .toggle button{display: block;}.toggle button:hover{background-color: rgb(125, 140, 161);cursor: pointer;}.toggle .prev{top: 125px;left: 30px;position: absolute;}.toggle .next{top: 125px;right: 30px;position: absolute;}</style>

JS部分

<script>const data = [{url:'./image/1.png'},{url:'./image/2.png'},{url:'./image/3.png'},{url:'./image/4.png'}]const img = document.querySelector('.carousel-wrapper img')// 1.右键const next = document.querySelector('.next')let i = 0next.addEventListener('click',function(){// console.log(data[i]);i++i = i>3 ? 0 : iimg.src=data[i].urldocument.querySelector('.carousel-indictor .active').classList.remove('active')document.querySelector(`.carousel-indictor li:nth-child(${i+1})`).classList.add('active')})// 2.左键const prev = document.querySelector('.prev')prev.addEventListener('click',function(){i--i = i<0 ? i=3 : i// 图像img.src=data[i].url// 下划线document.querySelector('.carousel-indictor .active').classList.remove('active')document.querySelector(`.carousel-indictor li:nth-child(${i+1})`).classList.add('active')})// 3.定时器let timerId = setInterval(function(){next.click()},1000)const carousel = document.querySelector('.carousel')carousel.addEventListener('mouseenter',function(){clearInterval(timerId)})carousel.addEventListener('mouseleave',function(){timerId= setInterval(function(){next.click()},1000)})// 4.经过li时,也对应跳转const ul = document.querySelector('.carousel-indictor')ul.addEventListener('click',function(e){if(e.target.tagName === 'LI'){document.querySelector('.carousel-indictor .active').classList.remove('active')e.target.classList.add('active')// console.log(e.target.dataset.id);const i = e.target.dataset.idimg.src=data[e.target.dataset.id].url}})</script>