HTML+圖片走馬燈是一種網頁設計中經常使用的效果之一。它通過利用HTML和圖片元素的特性,實現圖片的循環播放,視覺效果十分炫酷。
<div id="carousel"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div> <script> // 獲取輪播圖容器 var carousel = document.getElementById("carousel"); // 獲取所有圖片元素 var imgs = carousel.getElementsByTagName("img"); // 計算播放間隔時間,單位毫秒 var interval = 2000; // 設置起始索引值 var index = 0; // 定時器 setInterval(function() { // 顯示當前索引對應的圖片 imgs[index].style.display = "block"; // 隱藏其他圖片 for (var i = 0; i < imgs.length; i++) { if (i !== index) { imgs[i].style.display = "none"; } } // 切換至下一張圖片 index++; if (index >= imgs.length) { index = 0; } }, interval); </script>
上述代碼中,通過獲取輪播圖容器和所有圖片元素,并設置起始索引值和播放間隔時間等參數,實現了圖片的輪播效果。其中,使用了HTML的div、img和script等元素,以及各種常見的JavaScript語法。