话不多说，请看代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <style> * { margin: 0; padding: 0; } .banner { width: 500px; height: 300px; overflow: hidden; } .list { width: 400%; height: 100%; display: flex; } .list img { width: 25%; height: 100%; } .don { width: 100%; height: 200px; display: flex; } .left { position: absolute; bottom: 200px; } .left img { width: 100%; height: 20px; } .right { position: absolute; bottom: 200px; left: 480px; } .right img { width: 100%; height: 20px; } .huan{ display: flex; position: absolute; bottom: 90px; left: 235px; } .dian { width: 10px; height: 10px; background-color: beige; border-radius: 10px; } </style> <body> <div class="banner"> <div class="list"> <img src="./img/lun3.png" alt=""> <img src="./img/lun4.png" alt=""> <img src="./img/lun5.png" alt=""> <img src="./img/lun3.png" alt=""> </div> <div class="don"> <div class="left" οnclick="le()"> <img src="./img/angle-left.png" alt=""> </div> <div class="right" οnclick="ri()"> <img src="./img/angle-right.png" alt=""> </div> </div> </div> <div class="huan"> <div class="dian"></div> <div class="dian"></div> <div class="dian"></div> </div> <script> let list = document.getElementsByClassName("list")[0]; let banner = document.getElementsByClassName("banner")[0] let imgList = list.children; let imgWidth = imgList[0].offsetWidth; let d = 0; let a = setInterval(scrolls, 2000); let huan = document.getElementsByClassName("huan")[0] let huanArr = huan.children function scrolls() { d++; list.style.transition = "all 1s" list.style.marginLeft = -d * imgWidth + "px"; if (d == imgList.length-1) { setTimeout(function() { d = 0; list.style.transition = ""; list.style.marginLeft = "0px"; }, 1000) huanArr[0].style.backgroundColor = "red" huanArr[2].style.backgroundColor = "beige" }else{ huanArr[d].style.backgroundColor = "red" huanArr[d-1].style.backgroundColor = "beige" } } banner.onmouseenter = function() { clearInterval(a) } banner.onmouseout = function() { a = setInterval(scrolls, 2000); } function le() { if (d == 0) { d = imgList.length - 1 list.style.transition = ""; list.style.marginLeft = -d * imgWidth + "px"; huanArr[2].style.backgroundColor = "red" huanArr[0].style.backgroundColor = "beige" }else{ huanArr[d-1].style.backgroundColor = "red" huanArr[d].style.backgroundColor = "beige" } setTimeout(function() { d--; list.style.transition = "all 1s" list.style.marginLeft = -d * imgWidth + "px"; }, 0) } let isstatus = true function ri() { if (!isstatus) { return } isstatus = false; scrolls(); setTimeout(function() { isstatus = true; }, 1000) } </script> </body> </html>
