js文字li滚动代码

<div id="scrollContainer">
  <ul id="scrollList">
    <li>第一条消息</li>
    <li>第二条消息</li>
    <li>第三条消息</li>
    <!-- 更多消息... -->
  </ul>
</div>

#scrollContainer {
  width: 300px;
  height: 50px; /* 设置固定高度 */
  overflow: hidden; /* 隐藏超出部分 */
  position: relative;
}

#scrollList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
}

#scrollList li {
  padding: 10px;
}

const scrollList = document.getElementById('scrollList');
const listItems = scrollList.getElementsByTagName('li');
let scrollIndex = 0;

function scrollText() {
  // 将所有列表项向上移动一个位置
  for (let i = 0; i < listItems.length - 1; i++) {
    listItems[i].style.display = 'none';
  }
  // 显示新的列表项
  listItems[scrollIndex].style.display = 'block';
  // 更新索引，实现循环滚动
  scrollIndex = (scrollIndex + 1) % listItems.length;
}

// 设置定时器，每隔一段时间滚动一次
setInterval(scrollText, 2000); // 每2秒滚动一次