js简单图片轮播

<div class="carousel">
  <img src="image1.jpg" alt="Image 1" class="carousel-image active">
  <img src="image2.jpg" alt="Image 2" class="carousel-image">
  <img src="image3.jpg" alt="Image 3" class="carousel-image">
  <!-- 可以添加更多图片 -->
</div>
<button onclick="prevImage()">Prev</button>
<button onclick="nextImage()">Next</button>

.carousel {
  position: relative;
  width: 500px; /* 设置容器宽度 */
  height: 300px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏溢出的图片 */
}

.carousel-image {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0; /* 默认图片透明度为0 */
  transition: opacity 1s ease-in-out; /* 图片切换时的过渡效果 */
}

.carousel-image.active {
  opacity: 1; /* 当前显示的图片透明度为1 */
}

let currentIndex = 0; // 当前显示的图片索引
const images = document.querySelectorAll('.carousel-image'); // 获取所有图片元素

function showImage(index) {
  images.forEach((img, i) => {
    img.classList.toggle('active', i === index); // 切换图片的active类，控制显示和隐藏
  });
}

function nextImage() {
  currentIndex = (currentIndex + 1) % images.length; // 计算下一个图片的索引
  showImage(currentIndex); // 显示下一个图片
}

function prevImage() {
  currentIndex = (currentIndex - 1 + images.length) % images.length; // 计算上一个图片的索引
  showImage(currentIndex); // 显示上一个图片
}

// 自动轮播（可选）
setInterval(nextImage, 3000); // 每3秒自动切换到下一张图片