js无缝循环滚动代码

<div class="scroll-container">
  <ul class="scroll-content">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <!-- 更多内容 -->
  </ul>
</div>

.scroll-container {
  width: 300px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  white-space: nowrap;
}

.scroll-content li {
  display: inline-block;
}

function startScroll(container, content, speed) {
  let firstItem = content.children[0];
  let clone = firstItem.cloneNode(true);
  content.appendChild(clone);

  function scroll() {
    container.scrollLeft += 1;
    if (container.scrollLeft >= firstItem.offsetWidth) {
      container.scrollLeft = 0;
    }
  }

  setInterval(scroll, speed);
}

document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('.scroll-container');
  const content = document.querySelector('.scroll-content');
  startScroll(container, content, 20); // 速度可以根据需要调整
});