怎么用js实现滚动播放

使用CSS动画实现滚动播放

通过CSS的@keyframes和animation属性实现水平滚动效果。将内容包裹在容器中，设置动画从右向左移动。

<style>
  .scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .scroll-content {
    display: inline-block;
    animation: scroll 10s linear infinite;
  }
  @keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
</style>

<div class="scroll-container">
  <div class="scroll-content">需要滚动播放的文本内容</div>
</div>

使用JavaScript定时器实现滚动

通过setInterval定时修改元素的scrollLeft属性实现平滑滚动。这种方式适用于容器内包含可滚动内容的情况。

const container = document.getElementById('scrollContainer');
let scrollAmount = 0;
const scrollSpeed = 1;

function startScrolling() {
  setInterval(() => {
    scrollAmount += scrollSpeed;
    if (scrollAmount >= container.scrollWidth - container.clientWidth) {
      scrollAmount = 0;
    }
    container.scrollLeft = scrollAmount;
  }, 16); // 约60帧/秒
}

使用requestAnimationFrame实现高性能滚动

requestAnimationFrame比setInterval更适合动画场景，能自动匹配浏览器刷新率。

const element = document.getElementById('scrollingElement');
let position = 0;
const speed = 1;

function animate() {
  position += speed;
  if (position > element.scrollWidth) {
    position = 0;
  }
  element.style.transform = `translateX(-${position}px)`;
  requestAnimationFrame(animate);
}
animate();

实现无缝循环滚动

当内容滚动到末尾时无缝衔接开头，需要克隆内容并适当处理。

const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');
const clone = content.cloneNode(true);
container.appendChild(clone);

let scrollPosition = 0;
function scroll() {
  scrollPosition += 1;
  if (scrollPosition >= content.offsetWidth) {
    scrollPosition = 0;
  }
  container.style.transform = `translateX(-${scrollPosition}px)`;
  requestAnimationFrame(scroll);
}
scroll();

使用第三方库实现复杂滚动

考虑使用专门的处理库如Swiper.js或Glide.js，它们提供丰富的配置选项和响应式支持。

// 使用Swiper.js示例
import Swiper from 'swiper';
new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  speed: 1000,
});