简单的js幻灯片代码

以下是一个简单的 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;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#slideshow img.active {
  opacity: 1;
}

JavaScript 部分：

const images = document.querySelectorAll('#slideshow img');
let currentIndex = 0;

function showImage(index) {
  images.forEach((img, i) => {
    img.classList.remove('active');
  });
  images[index].classList.add('active');
}

function nextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}

setInterval(nextImage, 3000); // 每 3 秒切换一次图片

基础概念：