基本的无缝滚动特效，当页面加载完成后，内容块会不断向左滚动

这段代码实现了一个基本的无缝滚动特效，当页面加载完成后，内容块会不断向左滚动，直到滚动到最后一个内容块时，会重新从第一个内容块开始滚动，实现无缝滚动的效果。需要注意的是，由于JavaScript部分使用了定时器来实现滚动，因此需要在页面卸载时清除定时器，避免内存泄漏

废话就不多说了直接给上代码

html代码

<div class="scroll-container">
  <div class="scroll-content">
    <div class="scroll-item">内容1</div>
    <div class="scroll-item">内容2</div>
    <div class="scroll-item">内容3</div>
    <div class="scroll-item">内容1</div>
    <div class="scroll-item">内容2</div>
    <div class="scroll-item">内容3</div>
  </div>
</div>

css代码

.scroll-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.scroll-content {
  width: 200%;
  height: 100%;
}

.scroll-item {
  width: 50%;
  float: left;
}

js代码

var scrollContainer = document.querySelector('.scroll-container');
var scrollContent = document.querySelector('.scroll-content');
var scrollItems = document.querySelectorAll('.scroll-item');

var scrollWidth = scrollContainer.offsetWidth;
var itemWidth = scrollItems[0].offsetWidth;
var itemCount = scrollItems.length;

var currentPosition = 0;
var scrollInterval = setInterval(function() {
  currentPosition -= itemWidth;
  if (currentPosition < -scrollWidth) {
    currentPosition = 0;
  }
  scrollContent.style.transform = 'translateX(' + currentPosition + 'px)';
}, 10);

这段代码实现了一个基本的无缝滚动特效，当页面加载完成后，内容块会不断向左滚动，直到滚动到最后一个内容块时，会重新从第一个内容块开始滚动，实现无缝滚动的效果。需要注意的是，由于JavaScript部分使用了定时器来实现滚动，因此需要在页面卸载时清除定时器，避免内存泄漏

可以在这里运行测试代码
https://codepen.io/pen/?template=PEJyXvq