js左右箭头轮播

<div class="carousel">
  <div class="carousel-inner">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="left-arrow">←</button>
  <button class="right-arrow">→</button>
</div>

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 300px;
}

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

.carousel-inner img.active {
  opacity: 1;
}

.left-arrow,
.right-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
}

.left-arrow {
  left: 10px;
}

.right-arrow {
  right: 10px;
}

const images = document.querySelectorAll('.carousel-inner img');
let currentIndex = 0;

function showImage(index) {
  images.forEach((img, i) => {
    img.classList.toggle('active', i === index);
  });
}

document.querySelector('.left-arrow').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
});

document.querySelector('.right-arrow').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
});

// 初始化显示第一张图片
showImage(currentIndex);