js实现div循环播放

实现 div 循环播放的方法

使用 CSS 动画和 JavaScript 控制

通过 CSS 定义动画效果，JavaScript 控制循环逻辑。以下是实现代码：

<style>
  .slider {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .slider-content {
    display: flex;
    transition: transform 0.5s ease;
  }
  .slide {
    min-width: 100%;
    box-sizing: border-box;
  }
</style>

<div class="slider">
  <div class="slider-content">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

<script>
  const sliderContent = document.querySelector('.slider-content');
  const slides = document.querySelectorAll('.slide');
  let currentIndex = 0;

  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    sliderContent.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

  setInterval(nextSlide, 3000);
</script>

纯 JavaScript 实现

不依赖 CSS 动画，完全通过 JavaScript 控制：

const container = document.getElementById('slider-container');
const slides = container.querySelectorAll('.slide');
let currentIndex = 0;

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.style.display = i === index ? 'block' : 'none';
  });
}

function autoRotate() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}

showSlide(0);
setInterval(autoRotate, 2000);

使用 requestAnimationFrame

更平滑的动画效果实现方式：

const slider = document.querySelector('.slider');
const content = document.querySelector('.slider-content');
const items = document.querySelectorAll('.slider-item');
const itemWidth = items[0].offsetWidth;
let position = 0;
let animationId;

function animate() {
  position -= 1;
  if (position < -itemWidth) {
    position = 0;
    content.appendChild(content.firstElementChild);
  }
  content.style.transform = `translateX(${position}px)`;
  animationId = requestAnimationFrame(animate);
}

function startAnimation() {
  if (!animationId) {
    animate();
  }
}

function stopAnimation() {
  cancelAnimationFrame(animationId);
  animationId = null;
}

startAnimation();

无限循环的克隆方法

通过克隆元素实现无缝循环：

const slider = document.querySelector('.slider');
const content = document.querySelector('.slider-content');
const items = document.querySelectorAll('.slider-item');

// 克隆第一个元素并添加到末尾
content.appendChild(items[0].cloneNode(true));

let currentPosition = 0;
const itemWidth = items[0].offsetWidth;

function slide() {
  currentPosition -= 1;
  content.style.transform = `translateX(${currentPosition}px)`;

  if (currentPosition <= -itemWidth) {
    currentPosition = 0;
    // 移动第一个元素到最后
    content.appendChild(content.firstElementChild);
    content.style.transform = 'translateX(0)';
  }

  requestAnimationFrame(slide);
}

slide();

每种方法适用于不同场景，CSS 动画方法简单高效，纯 JavaScript 方法兼容性更好，requestAnimationFrame 适合需要精细控制的场景，克隆方法可以实现完美的无缝循环效果。