HTML5圖片輪播

HTML5圖片輪播是一種常用的網頁效果，可以讓圖片在頁面上自動切換，為網站增加動態感。下面是一個簡單的示例：

<div id="slider">
<img src="img1.jpg" alt="Image 1" />
<img src="img2.jpg" alt="Image 2" />
<img src="img3.jpg" alt="Image 3" />
</div>
<script>
var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");
var currentIndex = 0;
var intervalId;
function showImage(index) {
images[currentIndex].style.display = "none";
images[index].style.display = "block";
currentIndex = index;
}
function startSlider() {
intervalId = setInterval(function() {
var nextIndex = currentIndex + 1;
if (nextIndex >= images.length) {
nextIndex = 0;
}
showImage(nextIndex);
}, 3000);
}
function stopSlider() {
clearInterval(intervalId);
}
slider.onmouseover = stopSlider;
slider.onmouseout = startSlider;
showImage(currentIndex);
startSlider();
</script>

上面的代碼使用了JavaScript，通過改變圖片的display屬性來實現輪播效果。其中currentIndex表示當前顯示的圖片索引，intervalId表示定時器ID，showImage()函數用來切換圖片，startSlider()函數用來啟動輪播，stopSlider()函數用來停止輪播，slider的onmouseover和onmouseout事件用來處理鼠標移入和移出事件。

需要注意的是，在運行代碼之前需要確保所有圖片的寬度和高度相同，否則會出現圖片尺寸不一致的問題。