用setInterval+querySelectorAll实现轮播图需20行内完成：获取图片元素，用currentIndex记录索引，定时切换active类；须用position: absolute叠层避免重排，监听visibilitychange防后台暂停，支持data-index导航点点击跳转。
用 setInterval + querySelectorAll 控制图片切换
轮播图本质就是定时切换一组 <img> 的显隐状态，不需要框架也能 20 行内搞定。核心是拿到所有图片元素，用一个索引 currentIndex 记录当前显示哪张，再用 setInterval 触发切换逻辑。
注意：别直接用 display: none 切换，会导致图片反复重排重绘；推荐用 opacity + visibility 组合，或更稳妥的 z-index 叠层控制。
- 确保所有图片尺寸一致，否则容器会跳动
- 切换前先清除上一次定时器，避免多次点击触发多个
setInterval - 索引递增后要取模：
currentIndex = (currentIndex + 1) % images.length
<div id="carousel">
<img src="1.jpg" class="slide active">
<img src="2.jpg" class="slide">
<img src="3.jpg" class="slide">
</div>
<script>
const images = document.querySelectorAll('.slide');
let currentIndex = 0;
let timer = null;
function showSlide(index) {
images.forEach((img, i) => {
img.classList.toggle('active', i === index);
});
}
function nextSlide() {
currentIndex = (currentIndex + 1) % images.length;
showSlide(currentIndex);
}
timer = setInterval(nextSlide, 3000);
</script>
.active 类必须用 position: absolute 叠在一起
如果只是靠 display 或 visibility 切换，默认文档流会让图片上下堆叠，轮播就变成“一张张往下掉”。必须让所有 .slide 脱离文档流，共享同一位置。
-
#carousel需设position: relative作为定位上下文 - 每个
.slide设position: absolute; top: 0; left: 0; width: 100%; height: 100% -
.active可额外加z-index: 2，其他默认z-index: 1，避免闪屏
自动播放被浏览器暂停？检查 document.hidden 状态
现代浏览器（Chrome、Edge）在标签页非激活时会暂停 setInterval，导致切到别的标签再回来，轮播卡住或跳多张。得监听页面可见性变化，手动恢复计时。
立即学习“前端免费学习笔记（深入）”；
- 用
document.addEventListener('visibilitychange', ...)捕获切换 -
document.hidden === true时clearInterval(timer) -
document.hidden === false时重新setInterval（或记录最后切换时间，补帧）
点小圆点切换？给 data-index 绑事件就行
导航点不是必须用 JS 动态生成，静态写死更稳。每个点加 data-index="0"，点击时读取并跳转：
<div class="dots">
<span data-index="0" class="dot active"></span>
<span data-index="1" class="dot"></span>
<span data-index="2" class="dot"></span>
</div>
<script>
document.querySelectorAll('.dot').forEach(dot => {
dot.addEventListener('click', () => {
const idx = parseInt(dot.getAttribute('data-index'));
if (idx !== currentIndex) {
currentIndex = idx;
showSlide(currentIndex);
// 可选：重置自动轮播计时
clearInterval(timer);
timer = setInterval(nextSlide, 3000);
}
});
});
</script>
轮播最难的不是切换逻辑，而是各种边界情况：用户快速连点、切到后台又切回、图片加载失败占位、缩放后尺寸错乱……这些都得单独兜底，不能只靠“切换”本身。
