以下是一个简单的JavaScript幻灯片代码示例:
HTML代码:
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秒自动切换到下一张图片。你可以根据自己的需求添加更多的幻灯片和自定义样式。