幻燈片輪播是Web頁面中常見的交互效果,可以使頁面更加生動、美觀,更易于吸引用戶的注意力。在HTML中,實現幻燈片輪播效果主要利用CSS和JavaScript技術,下面演示一段基本的HTML代碼實現幻燈片輪播效果。
<div class="wrapper"> <img class="slide" src="img/slide1.jpg"> <img class="slide" src="img/slide2.jpg"> <img class="slide" src="img/slide3.jpg"> <img class="slide" src="img/slide4.jpg"> <img class="slide" src="img/slide5.jpg"> </div> <script type="text/javascript"> var slides = document.getElementsByClassName('slide'); var currentSlide = 0; setInterval(function() { for (var i = 0; i < slides.length; i++) { slides[i].style.display = 'none'; } currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].style.display = 'block'; }, 5000); </script>
上面的代碼有一個包含多個幻燈片圖片的div容器,每個圖片都有一個class="slide"屬性。使用JavaScript編寫了一個定時器,5秒鐘輪播一次,通過改變當前幻燈片圖片的display屬性,實現輪播效果。CSS樣式可以自由進行設計和更改。
上一篇html怎么設置h2居中
下一篇vue aiox