三个图片轮换js代码

以下是一个简单的三个图片轮换的 JavaScript 代码示例：

HTML 部分：

<div id="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS 部分：

#image-container img {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#image-container img.active {
  opacity: 1;
}

JavaScript 部分：

const images = document.querySelectorAll('#image-container img');
let currentIndex = 0;

function showNextImage() {
  // 移除当前图片的 active 类
  images[currentIndex].classList.remove('active');

  // 更新索引
  currentIndex = (currentIndex + 1) % images.length;

  // 添加 active 类到下一张图片
  images[currentIndex].classList.add('active');
}

// 初始显示第一张图片
images[currentIndex].classList.add('active');

// 设置定时器，每隔一段时间轮换图片
setInterval(showNextImage, 3000); // 每 3 秒轮换一次

基础概念：

这是一个基于 JavaScript 实现的简单图片轮换效果。通过控制图片的显示和隐藏来实现轮换。

优势：