js实现无缝滚动图效果

实现无缝滚动图效果的一种常见方式是利用 JavaScript 和 CSS3 动画实现。以下是一个简单的实现方式：

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';

// 复制列表项元素并添加到列表末尾
for (var i = 0; i < itemCount; i++) {
  var clone = items[i].cloneNode(true);
  list.appendChild(clone);
}

实现效果就是一个水平滚动的图片列表，滚动到最后一张图片时会立即回到第一张图片，从而实现了无缝滚动的效果。