轮播图图
| 1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示； 2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上； 3.点击左右箭头可以进行左右图片的切换； 4.图片上需有介绍的文字，会随图片切换一起进行切换。 |
这个烂尾了，俺不会做，就完成了第一步自动轮播，希望能给一分
<!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.ssl.qhimgs1.com/sdr/400__/t01a4ef511318b8d0e7.png" alt="1"><img class="img-slide img2" src="http://i2.sanwen.net/doc/1601/675-16012Q55525.png" alt="2"><img class="img-slide img3"src="http://5b0988e595225.cdn.sohucs.com/images/20180620/b82e95db61bd4a658f25a6c8e3142b7f.jpeg" alt="3"><img class="img-slide img4"src="http://www.86ps.com/sc/dz/168/1920CAT_008002.jpg" alt="3"><img class="img-slide img5"src="https://p5.ssl.qhimgs1.com/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>
