js实现3秒一切换
使用setInterval实现定时切换
通过setInterval函数可以创建一个定时器，每隔3秒执行一次切换逻辑。以下是基础实现代码：
let currentIndex = 0;
const elements = document.querySelectorAll('.item'); // 获取需要切换的元素集合
const interval = setInterval(() => {
// 隐藏当前元素
elements[currentIndex].style.display = 'none';
// 计算下一个索引（循环）
currentIndex = (currentIndex + 1) % elements.length;
// 显示下一个元素
elements[currentIndex].style.display = 'block';
}, 3000); // 3000毫秒=3秒使用setTimeout实现递归切换
递归调用setTimeout可以避免setInterval可能带来的执行堆叠问题：
let currentIndex = 0;
const elements = document.querySelectorAll('.item');
function switchElement() {
elements[currentIndex].style.display = 'none';
currentIndex = (currentIndex + 1) % elements.length;
elements[currentIndex].style.display = 'block';
setTimeout(switchElement, 3000); // 递归调用
}
switchElement(); // 启动切换添加过渡动画效果
结合CSS transition实现平滑的淡入淡出效果：
// CSS部分需要预先定义
// .item { transition: opacity 0.5s; }
// .item.hidden { opacity: 0; }
const items = document.querySelectorAll('.item');
let index = 0;
function animateSwitch() {
items[index].classList.add('hidden');
index = (index + 1) % items.length;
items[index].classList.remove('hidden');
setTimeout(animateSwitch, 3000);
}
// 初始化隐藏所有非第一个元素
items.forEach((item, i) => {
if(i !== 0) item.classList.add('hidden');
});
animateSwitch();支持暂停和继续功能
通过清除和重新创建定时器实现控制：
let timer;
let current = 0;
const slides = document.querySelectorAll('.slide');
function startCarousel() {
timer = setInterval(() => {
slides[current].classList.remove('active');
current = (current + 1) % slides.length;
slides[current].classList.add('active');
}, 3000);
}
function pauseCarousel() {
clearInterval(timer);
}
// 绑定事件示例
document.getElementById('pauseBtn').addEventListener('click', pauseCarousel);
document.getElementById('resumeBtn').addEventListener('click', startCarousel);
startCarousel(); // 初始启动使用requestAnimationFrame实现
对于需要高性能动画的场景，可以使用requestAnimationFrame：
let lastTime = 0;
let currentSlide = 0;
const duration = 3000;
const slides = document.querySelectorAll('.slide');
function animate(timestamp) {
if (!lastTime) lastTime = timestamp;
const elapsed = timestamp - lastTime;
if (elapsed > duration) {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
lastTime = timestamp;
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
