下面土嘎嘎小编分享一个简单的 JavaScript 幻灯片代码示例，使用原生 JavaScript 实现基本的幻灯片效果：
HTML 结构：
〓〓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 样式：
〓〓css代码如下：〓〓
#slideshow {
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
}
#slideshow img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
JavaScript 代码：
〓〓javascript代码如下：〓〓
var slideshow = document.getElementById('slideshow');
var images = slideshow.getElementsByTagName('img');
var currentIndex = 0;
function showImage(index) {
if (index < 0 || index >= images.length) {
return; // 确保索引在有效范围内
}
for (var i = 0; i < images.length; i++) {
images[i].style.opacity = 0; // 隐藏所有图片
}
images[index].style.opacity = 1; // 显示指定索引的图片
}
function nextImage() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0; // 当到达最后一张图片时循环到第一张
}
showImage(currentIndex);
}
// 设置定时器，每隔两秒切换到下一张图片
setInterval(nextImage, 2000);
// 初始化，显示第一张图片
showImage(currentIndex);
上面给出的代码通过 JavaScript 实现了一个简单的幻灯片效果。使用 CSS 控制幻灯片容器的样式和图片的过渡效果，然后使用 JavaScript 控制图片的显示与隐藏，以及切换到下一张图片的逻辑。
土粉们可以根据需要修改 HTML 结构、CSS 样式和 JavaScript 代码来适应土粉们的幻灯片需求。还可以添加其他功能，例如前进按钮、自动播放开关等来增强幻灯片的交互性。