js实现div循环播放

实现Div循环播放的方法

使用JavaScript实现Div循环播放可以通过多种方式完成，以下是几种常见的实现方法。

使用setInterval定时切换

通过setInterval函数定时切换显示不同的Div元素，实现循环播放效果。

const divs = document.querySelectorAll('.loop-div');
let currentIndex = 0;

function showNextDiv() {
  divs.forEach(div => div.style.display = 'none');
  currentIndex = (currentIndex + 1) % divs.length;
  divs[currentIndex].style.display = 'block';
}

// 初始显示第一个Div
divs.forEach((div, index) => {
  div.style.display = index === 0 ? 'block' : 'none';
});

// 每3秒切换一次
setInterval(showNextDiv, 3000);

使用CSS动画和类名切换

结合CSS动画和JavaScript类名切换，实现更平滑的过渡效果。

const container = document.querySelector('.loop-container');
const divs = container.querySelectorAll('.loop-div');
let currentIndex = 0;

function cycleDivs() {
  divs.forEach(div => div.classList.remove('active'));
  currentIndex = (currentIndex + 1) % divs.length;
  divs[currentIndex].classList.add('active');
}

// 初始设置
divs[0].classList.add('active');
setInterval(cycleDivs, 3000);

对应的CSS样式：

.loop-div {
  opacity: 0;
  transition: opacity 0.5s ease;
  position: absolute;
}

.loop-div.active {
  opacity: 1;
}

使用requestAnimationFrame实现高性能动画

对于需要高性能动画的场景，可以使用requestAnimationFrame实现更流畅的循环播放。

const divs = document.querySelectorAll('.loop-div');
let currentIndex = 0;
let lastTime = 0;
const interval = 3000; // 3秒间隔

function animate(time) {
  if (!lastTime || time - lastTime >= interval) {
    divs.forEach(div => div.style.display = 'none');
    currentIndex = (currentIndex + 1) % divs.length;
    divs[currentIndex].style.display = 'block';
    lastTime = time;
  }
  requestAnimationFrame(animate);
}

// 初始显示
divs[0].style.display = 'block';
requestAnimationFrame(animate);

实现淡入淡出效果

如果需要更美观的过渡效果，可以实现淡入淡出动画。

const container = document.querySelector('.loop-container');
const divs = container.querySelectorAll('.loop-div');
let currentIndex = 0;

function fadeDivs() {
  const currentDiv = divs[currentIndex];
  const nextIndex = (currentIndex + 1) % divs.length;
  const nextDiv = divs[nextIndex];

  currentDiv.style.opacity = 1;
  nextDiv.style.opacity = 0;
  nextDiv.style.display = 'block';

  let opacity = 0;
  const fadeInterval = setInterval(() => {
    opacity += 0.05;
    currentDiv.style.opacity = 1 - opacity;
    nextDiv.style.opacity = opacity;

    if (opacity >= 1) {
      clearInterval(fadeInterval);
      currentDiv.style.display = 'none';
      currentIndex = nextIndex;
    }
  }, 50);
}

// 初始设置
divs.forEach((div, index) => {
  div.style.opacity = index === 0 ? 1 : 0;
  div.style.display = 'block';
});

setInterval(fadeDivs, 3000);

以上方法可以根据具体需求选择使用，setInterval适合简单切换，CSS动画适合需要平滑过渡的场景，而requestAnimationFrame则适合高性能要求的动画效果。