用js实现幻灯片轮换效果代码

以下是一个使用JavaScript实现幻灯片轮换效果的代码示例：

// HTML结构
<div class="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: 100%;
  height: 400px;
  overflow: hidden;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

// JavaScript代码
var images = document.querySelectorAll('.slideshow img');
var currentImageIndex = 0;

function showNextImage() {
  // 隐藏当前图片
  images[currentImageIndex].style.opacity = 0;
  
  // 计算下一张图片的索引
  currentImageIndex = (currentImageIndex + 1) % images.length;
  
  // 显示下一张图片
  images[currentImageIndex].style.opacity = 1;
}

// 每隔3秒切换图片
setInterval(showNextImage, 3000);