js图片无缝横向滚动

<div class="scrolling-wrapper">
  <div class="scrolling-content">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->
  </div>
</div>

.scrolling-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scrolling-content {
  display: inline-block;
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

document.addEventListener('DOMContentLoaded', function() {
  const content = document.querySelector('.scrolling-content');
  const clone = content.cloneNode(true);
  content.parentNode.appendChild(clone);

  function scroll() {
    if (content.scrollLeft >= content.scrollWidth / 2) {
      content.scrollLeft = 0;
    } else {
      content.scrollLeft++;
    }
  }

  setInterval(scroll, 20);
});