以下是一个简单的轮播图实现,使用了HTML、CSS和JavaScript:
HTML部分:
<div class="slideshow-container"> <div class="mySlides fade"> <img src="img1.jpg"> </div> <div class="mySlides fade"> <img src="img2.jpg"> </div> <div class="mySlides fade"> <img src="img3.jpg"> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div>
CSS部分:
.slideshow-container { max-width: 500px; position: relative; margin: auto; } .mySlides { display: none; position: absolute; top: 0; left: 0; right: 0; } .mySlides img { width: 100%; height: auto; } .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; }
JavaScript部分:
var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; setTimeout(showSlides, 3000); // 每3秒切换一张图片 } // 当点击小圆点时,切换到对应的图片 var dots = document.getElementsByClassName("dot"); for (var i = 0; i < dots.length; i++) { dots[i].onclick = function () { for (var j = 0; j < dots.length; j++) { dots[j].className = dots[j].className.replace(" active", ""); } this.className += " active"; var slides = document.getElementsByClassName("mySlides"); for (var k = 0; k < slides.length; k++) { slides[k].style.display = "none"; } slides[Array.prototype.indexOf.call(dots, this)].style.display = "block"; slideIndex = Array.prototype.indexOf.call(dots, this) + 1; }; }
实现原理:
1.用一个索引变量 slideIndex 记录当前显示的图片的下标。
2.定义一个名为 showSlides 的函数,每次调用该函数时,将当前显示的图片隐藏,将 slideIndex 增加 1,如果 slideIndex 超过图片总数,将其设为 1,然后显示对应的图片和小圆点。
3.使用 setTimeout 函数每隔 3 秒调用一次 showSlides 函数,实现自动轮播。
4.当点击小圆点时,切换到对应的图片,相应的小圆点也被标记为 active。