要使用JS實現圖片幻燈片效果,可以按照以下步驟進行操作:
<div>
元素作為容器,給它一個唯一的ID作為標識。<div id="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<!-- ... 添加更多圖片 -->
</div>
#slideshow {
width: 500px;
height: 300px;
overflow: hidden;
}
#slideshow img {
display: none;
}
var slideshowContainer = document.getElementById("slideshow");
var images = slideshowContainer.getElementsByTagName("img");
var currentIndex = 0;
function changeImage() {
// 隱藏當前顯示的圖片
images[currentIndex].style.display = "none";
// 計算下一張圖片的索引
currentIndex = (currentIndex + 1) % images.length;
// 顯示下一張圖片
images[currentIndex].style.display = "block";
}
setInterval
函數來定時調用切換圖片的函數,以實現自動播放幻燈片。setInterval(changeImage, 2000); // 每2秒切換一張圖片
changeImage();
這樣就可以使用JS實現一個簡單的圖片幻燈片效果了。您可以根據需要進行樣式和功能的定制。