js文字轮播滚动

你可以使用以下代码实现 JavaScript 文字轮播滚动：

HTML 代码：

<div class="slider">
  <ul>
    <li>第一条消息</li>
    <li>第二条消息</li>
    <li>第三条消息</li>
    <li>第四条消息</li>
    <li>第五条消息</li>
  </ul>
</div>

CSS 代码：

.slider {
  overflow: hidden;
}
.slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  animation: slider 10s infinite linear;
}
.slider li {
  width: 20%;
  text-align: center;
}

@keyframes slider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

JavaScript 代码：

const slider = document.querySelector('.slider ul');
const sliderItems = document.querySelectorAll('.slider li');
const sliderWidth = sliderItems[0].offsetWidth;

let currentSlide = 1;

setInterval(() => {
  slider.style.transform = `translateX(-${currentSlide * sliderWidth}px)`;

  currentSlide++;

  if (currentSlide === sliderItems.length) {
    currentSlide = 1;
  }
}, 3000);

这段代码会实现一个带有 5 条消息的轮播滚动，每个消息占据 20% 的宽度，每隔 3 秒钟滚动到下一条消息。你可以根据需要更改消息的数量和滚动时间。