javascript自动轮播图

以下是一个简单的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 {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

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

.slideshow img.active {
  opacity: 1;
}

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

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

// 设置定时器，每隔3秒切换一张图片
setInterval(showNextImage, 3000);

这个示例中，我们使用了HTML、CSS和JavaScript来实现自动轮播图。首先，我们定义了一个包含多张图片的容器，并设置了容器的样式。然后，使用JavaScript代码获取所有的图片元素，并定义一个变量来记录当前显示的图片索引。接下来，我们编写了一个函数`showNextImage`来切换图片，该函数会隐藏当前图片，计算下一张图片的索引，并显示下一张图片。最后，我们使用`setInterval`函数来设置定时器，每隔3秒调用一次`showNextImage`函数，实现自动切换图片的效果。