轮播图图
这个烂尾了，俺不会做，就完成了第一步自动轮播，希望能给一分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>轮播图</title><style type="text/css">.imgBox {width: 100%;height: 250px;margin: 0 auto;position: relative;}.left{float: left;font-size: 30px;background-color: rgb(123, 96, 96);opacity: 0;width: 20px;height: 30px;left: 600px;top: 200px;position: absolute;}.right{float: left;font-size: 30px;background-color: rgb(123, 96, 96);opacity: 0;width: 20px;height: 30px;right: 600px;top: 200px;position: absolute;}.imgBox img {width: 250px;height: 250px;margin: 0 auto;padding-top: 30px;}.img1 {display: block;}.img2 {display: none;}.img3 {display: none;}.img4 {display: none;}.img5 {display: none;}.dian {display: flex;justify-content: center;width: 100%;margin-top: 200px;}.xiaodian {width: 10px;height: 10px;background-color: rgb(186, 161, 161);border-radius: 50%;border: 2px solid black;margin: 0 20px;cursor: pointer;}.dian .active{background-color: red;}</style></head><body><div class="left"></div><div class="right"></div><div class="imgBox" onmouseover="stop()" onmouseout="start()"><img class="img-slide img1" src="https://p1./sdr/400__/t01a4ef511318b8d0e7.png" alt="1"><img class="img-slide img2" src="/doc/1601/675-16012Q55525.png" alt="2"><img class="img-slide img3"src="http://5b0988e595225./images/0620/b82e95db61bd4a658f25a6c8e3142b7f.jpeg" alt="3"><img class="img-slide img4"src="/sc/dz/168/1920CAT_008002.jpg" alt="3"><img class="img-slide img5"src="https://p5./sdr/400__/t01a033d10bf4623115.jpg" alt="3"></div><div class="dian"><span class="xiaodian active"></span><span class="xiaodian"></span><span class="xiaodian"></span><span class="xiaodian"></span><span class="xiaodian"></span></div></body><script type="text/javascript">var index = 0;var imgBox = document.getElementById(".imgBox")var left = document.getElementById(".left")var right = document.getElementById(".right")var dian = document.querySelectorAll('.dian span')function ChangeImg() {index++;var a = document.getElementsByClassName("img-slide");if (index >= a.length) index = 0;for (var i = 0; i < a.length; i++) {a[i].style.display = 'none';}a[index].style.display = 'block';}setInterval(ChangeImg, 100000);ChangeImg = setInterval(ChangeImg,1000)function stop(){clearInterval(ChangeImg)}function start(){ChangeImg = setInterval(ChangeImg,1000)}imgBox.onmouseover = function(){left.style.opacity="1"right.style.opacity="1"}</script></html>
如果觉得《轮播图图图》对你有帮助，请点赞、收藏，并留下你的观点哦！
