用 js 实现循环滚动列表

以下是一个简单的用 JavaScript 实现循环滚动列表的例子：

HTML：

<div class="scroll-container">
  <ul class="scroll-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
  </ul>
</div>

CSS：

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

.scroll-list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  top: 0;
  transition: top 0.5s ease-in-out;
}

.scroll-list li {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #ccc;
}

JavaScript：

var scrollList = document.querySelector('.scroll-list');
var scrollItems = document.querySelectorAll('.scroll-list li');
var scrollHeight = scrollItems[0].offsetHeight;
var currentIndex = 0;

setInterval(function() {
  currentIndex++;
  if (currentIndex >= scrollItems.length) {
    currentIndex = 0;
    scrollList.style.top = 0;
  }
  scrollList.style.top = '-' + currentIndex * scrollHeight + 'px';
}, 2000);

解释：

1. 首先获取滚动列表和列表项的 DOM 对象，以及每个列表项的高度。

2. 然后设置一个计数器 `currentIndex`，初始值为 0。

3. 使用 `setInterval` 函数每隔 2 秒触发一次滚动事件。

4. 在滚动事件中先将计数器 `currentIndex` 增加 1，如果 `currentIndex` 大于等于列表项的数量，则重置为 0，并将滚动列表的 `top` 属性设置为 0，即回到起始位置。

5. 最后将滚动列表的 `top` 属性设置为负值的 `currentIndex * scrollHeight`，即向上滚动一个列表项的高度。