用setInterval+querySelectorAll实现轮播图需20行内完成：获取图片元素，用currentIndex记录索引，定时切换active类；须用position: absolute叠层避免重排，监听visibilitychange防后台暂停，支持data-index导航点点击跳转。
用 setInterval + querySelectorAll 控制图片切换
轮播图本质就是定时切换一组 currentIndex 记录当前显示哪张，再用 setInterval 触发切换逻辑。
注意：别直接用 display: none 切换，会导致图片反复重排重绘；推荐用 opacity + visibility 组合，或更稳妥的 z-index 叠层控制。
- 确保所有图片尺寸一致，否则容器会跳动
- 切换前先清除上一次定时器，避免多次点击触发多个
setInterval - 索引递增后要取模：
currentIndex = (currentIndex + 1) % images.length
@@##@@ @@##@@ @@##@@
.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"，点击时读取并跳转：
轮播最难的不是切换逻辑，而是各种边界情况：用户快速连点、切到后台又切回、图片加载失败占位、缩放后尺寸错乱……这些都得单独兜底，不能只靠“切换”本身。
