js 走马灯效果 无缝 不断实现

以下是一个简单的无缝走马灯效果的实现，使用JavaScript和CSS。

HTML:

<div id="marquee-container">
  <div id="marquee-content">
    <p>这是无缝滚动的文本内容...</p>
    <!-- 更多内容可以复制以上标签 -->
  </div>
</div>

CSS:

#marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
 
#marquee-content {
  display: inline-block;
  animation: marquee 10s linear infinite;
}
 
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

JavaScript (无需特殊代码，仅确保#marquee-content中有足够的内容来触发动画):

// 无需特殊代码，动画由CSS @keyframes 控制

这段代码实现了一个基本的无缝走马灯效果。#marquee-content元素通过CSS动画无限期地从右向左滚动，实现无缝连续滚动的效果。你可以根据需要添加更多内容到#marquee-content中，确保内容足够长以便可以滚动。