当前位置：首页 > JavaScript

js实现div循环播放

2026-01-31 03:03:28JavaScript

使用CSS动画实现循环播放

通过CSS的@keyframes和animation属性可以实现div元素的循环动画效果。这种方法性能较好，适合简单的循环动画。

/* 定义动画关键帧 */
@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

/* 应用动画到元素 */
.loop-div {
  animation: slide 2s infinite;
}

<div class="loop-div">循环移动的内容</div>

使用JavaScript的setInterval方法

通过JavaScript的定时器可以实现更灵活的控制，适合需要动态调整循环参数的场景。

const div = document.querySelector('.loop-div');
let position = 0;
const speed = 2;

setInterval(() => {
  position = (position + speed) % 100;
  div.style.transform = `translateX(${position}px)`;
}, 16);

使用requestAnimationFrame实现高性能动画

对于需要高性能的循环动画，推荐使用requestAnimationFrame，它能与浏览器刷新率同步。

const div = document.querySelector('.loop-div');
let position = 0;
const speed = 2;

function animate() {
  position = (position + speed) % 100;
  div.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate);
}

animate();

实现内容轮播效果

如果需要实现内容循环轮播（如幻灯片），可以使用以下方法：

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function showSlide(n) {
  slides.forEach(slide => slide.style.display = 'none');
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].style.display = 'block';
}

setInterval(() => {
  showSlide(currentSlide + 1);
}, 3000);

结合CSS和JavaScript实现复杂循环

对于更复杂的循环效果，可以结合CSS动画和JavaScript控制：

.loop-element {
  transition: transform 0.5s ease;
}

const element = document.querySelector('.loop-element');
let angle = 0;

setInterval(() => {
  angle = (angle + 15) % 360;
  element.style.transform = `rotate(${angle}deg)`;
}, 100);

以上方法可以根据具体需求选择使用，CSS动画适合简单效果，JavaScript实现提供更多控制，而requestAnimationFrame则能提供最流畅的动画体验。

js实现div循环播放