HTML5是一種用于創建 Web 內容的標準,它提供了許多新特性以及更好的語義化結構。其中之一就是輪播(Carousel)圖的實現,下面是一段 HTML5 簡單的輪播圖代碼:
<div id="carousel"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <script> var i = 0; var images = document.getElementsByTagName("img"); function nextImage() { images[i].style.display = "none"; i++; if (i == images.length) { i = 0; } images[i].style.display = "block"; } setInterval(nextImage, 3000); </script>
以上代碼中,輪播圖的 HTML 結構是一個 div 包含若干個 img 元素。JavaScript 部分通過設置圖片的 display 屬性來實現圖片間的切換,并使用 setInterval 函數循環調用 nextImage 函數來實現自動輪播。可以根據實際需求適當修改代碼。