css实现图片轮播

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
</div>

.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  min-width: 100%;
  box-sizing: border-box;
}

.carousel-item img {
  width: 100%;
  display: block;
}

const carouselInner = document.querySelector('.carousel-inner');
let index = 0;
const items = document.querySelectorAll('.carousel-item');

function moveToNextItem() {
  index++;
  if (index >= items.length) {
    index = 0;
    carouselInner.style.transition = 'none';
    carouselInner.style.transform = `translateX(0)`;
    setTimeout(() => {
      carouselInner.style.transition = 'transform 0.5s ease-in-out';
    }, 50);
  }
  carouselInner.style.transform = `translateX(-${index * 100}%)`;
}

setInterval(moveToNextItem, 3000); // 每 3 秒切换一次