怎么实现无线循环滚动

实现无限循环滚动的方式与实现无缝滚动类似，只需要在滚动到最后一张图片时，再将第一张图片追加到最后即可。以下是一个简单的实现方式：

HTML 代码：

<div class="scroll-wrapper">
  <ul class="scroll-list">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
    <li><img src="image5.jpg"></li>
  </ul>
</div>

CSS 代码：

.scroll-wrapper {
  overflow: hidden;
  position: relative;
}
.scroll-list {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
}
.scroll-list li {
  display: inline-block;
  margin-right: 20px;
}
.scroll-list li:last-child {
  margin-right: 0;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

JavaScript 代码：

// 获取列表元素和列表项元素
var list = document.querySelector('.scroll-list');
var items = document.querySelectorAll('.scroll-list li');

// 获取列表项元素宽度和数量
var itemWidth = items[0].offsetWidth;
var itemCount = items.length;

// 设置列表宽度
list.style.width = itemWidth * itemCount + 'px';

// 复制前两个列表项元素并添加到列表末尾
var clone1 = items[0].cloneNode(true);
var clone2 = items[1].cloneNode(true);
list.appendChild(clone1);
list.appendChild(clone2);

// 滚动到最后一个列表项时，将第一个列表项追加到列表末尾
list.addEventListener('animationiteration', function() {
  var firstItem = list.querySelector('li:first-child');
  list.appendChild(firstItem);
});

这样，当滚动到最后一张图片时，第一张图片会被追加到最后，从而实现了无限循环滚动的效果。