在 JavaScript 中實現圖片幻燈片效果有多種方法，以下是一種基本的實現方法：
HTML 結構：
<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>
CSS 樣式：
#slideshow {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
#slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease;
}
#slideshow img.active {
opacity: 1;
}
JavaScript 代碼：
var images = document.querySelectorAll('#slideshow img');
var currentImageIndex = 0;
function showImage(index) {
// 隱藏所有圖片
for (var i = 0; i < images.length; i++) {
images[i].classList.remove('active');
}
// 顯示指定索引的圖片
images[index].classList.add('active');
}
function nextImage() {
currentImageIndex++;
if (currentImageIndex >= images.length) {
currentImageIndex = 0;
}
showImage(currentImageIndex);
}
// 設置定時器，每隔3秒切換到下一張圖片
setInterval(nextImage, 3000);
// 初始化顯示第一張圖片
showImage(currentImageIndex);
以上代碼中，使用了 CSS 的 opacity 屬性和過渡效果來實現圖片的漸變顯示和隱藏。JavaScript 部分使用定時器來定時切換圖片，并通過添加和移除 active 類來控制圖片的顯示和隱藏。
