HTML5圖片輪播

HTML5圖片輪播是一種常用的網(wǎng)頁效果，可以讓圖片在頁面上自動(dòng)切換，為網(wǎng)站增加動(dòng)態(tài)感。下面是一個(gè)簡單的示例：

<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屬性來實(shí)現(xiàn)輪播效果。其中currentIndex表示當(dāng)前顯示的圖片索引，intervalId表示定時(shí)器ID，showImage()函數(shù)用來切換圖片，startSlider()函數(shù)用來啟動(dòng)輪播，stopSlider()函數(shù)用來停止輪播，slider的onmouseover和onmouseout事件用來處理鼠標(biāo)移入和移出事件。

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