js实现文字循环无间隙轮播

你可以使用JavaScript和CSS来实现文字循环无间隙轮播。以下是一个示例代码：

HTML:

<div class="slider-wrap">
  <ul class="slider">
    <li>第一段文字</li>
    <li>第二段文字</li>
    <li>第三段文字</li>
    <li>第四段文字</li>
    <li>第五段文字</li>
  </ul>
</div>

CSS:

.slider-wrap {
  overflow: hidden;
  width: 100%;
}

.slider {
  display: flex;
  animation: slider 10s linear infinite;
}

.slider li {
  flex: 1;
  margin: 0 20px;
  text-align: center;
}

@keyframes slider {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}

JavaScript:

const slider = document.querySelector('.slider');
const sliderItems = document.querySelectorAll('.slider li');

slider.appendChild(sliderItems[0].cloneNode(true));
slider.appendChild(sliderItems[1].cloneNode(true));
slider.appendChild(sliderItems[2].cloneNode(true));

这段代码将在轮播结束后，将第一个、第二个、第三个li元素复制一份并添加到ul.slider的末尾，以达到循环无间隙的效果。