javascirpt幻灯片代码怎么写

以下是一个简单的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 {
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
}
#slideshow img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease;
}

JavaScript代码：

var currentIndex = 0;
var slides = document.querySelectorAll("#slideshow img");
function showSlide(index) {
// 隐藏当前幻灯片
slides[currentIndex].style.opacity = 0;
// 更新当前索引
currentIndex = (index + slides.length) % slides.length;
// 显示新的幻灯片
slides[currentIndex].style.opacity = 1;
}
// 初始化显示第一张幻灯片
showSlide(0);
// 定时切换幻灯片
setInterval(function() {
showSlide(currentIndex + 1);
}, 3000);

这段代码会在指定的slideshow容器中显示一系列图片，每隔3秒自动切换到下一张图片。你可以根据自己的需求添加更多的幻灯片和自定义样式。