如何使用CSS制作无缝滚动的图片展示栏的效果

<div class="slideshow-container">
  <ul class="slideshow">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
    <!-- 更多图片项 -->
  </ul>
</div>

.slideshow-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slideshow {
  width: 100%;
  height: 100%;
  display: flex;
  animation: slide 10s infinite;
}

.slideshow li {
  flex-shrink: 0;
}

function slideImages() {
  var slideshow = document.querySelector('.slideshow');
  var firstImage = slideshow.querySelector('li');
  firstImage.addEventListener('transitionend', resetImagePosition);

  function resetImagePosition() {
    firstImage.style.transition = 'none';
    firstImage.style.transfORM = 'translateX(0)';
    setTimeout(startSlide, 0);
  }

  function startSlide() {
    firstImage.removeEventListener('transitionend', resetImagePosition);
    firstImage.style.transition = 'transform 5s ease-in-out';
    firstImage.style.transform = 'translateX(-100%)';
  }

  startSlide();
}

slideImages();