轮播图常见故障源于定时器管理、状态同步、CSS布局及页面可见性处理不当：需用单一定时器变量并清除旧定时器；currentIndex、translateX和指示点状态须原子更新；容器设overflow:hidden，禁用left/margin-left；监听页面visibilitychange事件暂停/恢复轮播。
轮播图不是“写完就能跑”，多数线上故障都出在几个关键节点上，而不是逻辑本身。
setInterval 多次创建导致闪动
这是最常被复现的崩溃点：每次点击按钮都调用 startSlide()，而它内部又直接 setInterval(slideNext, 3000)。结果就是多个定时器并行触发，slideNext() 被高频调用，图片瞬间乱跳。
- 必须用单一全局变量（如
let slideTimer = null）持有当前定时器 ID - 所有启动逻辑前先执行
clearInterval(slideTimer) - 不要在
click回调里用setTimeout(startSlide, 3000)—— 这等于延迟新建一个定时器，而非恢复节奏 - 用户交互后应立即切换，再立刻重置单一定时器，确保下一帧从新状态开始计时
transform 切换时状态不同步
用 transform: translateX() 实现滑动时，只改样式不更新索引，下一次自动轮播就会切错位置。比如点了第 3 个圆点，容器位移到位了，但 currentIndex 还是 0，3 秒后自动切到第 1 张图。
-
currentIndex、translateX值、指示点高亮状态，必须在同一个函数内原子更新 - 小圆点的
data-index必须和图片数组下标严格一致（从 0 开始） - 快速连点时加
isTransitioning锁，动画中禁止响应新操作，否则translateX被覆盖，出现“闪回” - 移动端滑动结束要根据偏移量做吸附判断：
Math.abs(offset) > width * 0.3才真正切换，否则回弹
结构或 CSS 导致布局失控
轮播容器高度塌陷、图片拉伸变形、滑出内容露出来——这些问题几乎都来自结构松散或 CSS 没压住边界。
立即学习“前端免费学习笔记（深入）”；
- 容器必须设
overflow: hidden，否则transform滑出的部分会溢出显示 - 别用
left或margin-left做位移：它们触发布局（layout），卡顿明显；只用transform和opacity - 图片宽高未固定时，用
object-fit: cover防止变形，配合明确的容器尺寸（如height: 400px） - 如果用
.carousel-item结构（如 Bootstrap 或可配置组件），每个 item 不能设display: none或visibility: hidden，否则 CSS 动画无法触发重绘
最容易被忽略的是：页面切到后台（比如切换 Tab）后，setInterval 在 Chrome 中会被节流到最低 1000ms，若你设了 300ms 自动播放，实际就完全失准；得监听 visibilitychange 事件，在 document.hidden 为 true 时暂停，回来再恢复。
