原生HTML轮播图稳定运行的关键是解决定时器冲突、索引不同步、图片错位和移动端失灵等问题：需用intervalId管理定时器、动态读取图片宽度并缓存、统一CSS过渡、同步更新currentIndex与UI状态、完整实现触摸事件链，并监听visibilitychange恢复轮播。
原生 HTML 轮播图不用框架也能跑稳，关键不是“怎么动”，而是“怎么不乱”——定时器冲突、索引不同步、图片错位、移动端失灵，这些问题比动画本身更常卡住进度。
如何用 setInterval 启动轮播又不翻车
直接写 setInterval(next, 3000) 是最常见翻车起点：用户点按钮后定时器还在跑，导致图片跳回或连切两张。
- 必须用变量存定时器 ID：
let intervalId = null - 每次启动前先清理：
clearInterval(intervalId)，包括在next()、prev()和点击指示点后 - 鼠标悬停时调用
clearInterval(intervalId)，移出时重新setInterval（移动端可忽略该逻辑） - 别在
setInterval回调里直接操作 DOM，封装成showSlide(index)再调用，便于复用和测试
transform: translateX() 切换时位移算不准怎么办
硬写 translateX(-300px) 必然错——图片宽度含 padding/gap、缩放响应式、字体渲染差异都会让实际宽度变化。
- 用
element.getBoundingClientRect().width动态读取单张图宽度（推荐在初始化时读一次并缓存） - 容器必须设
overflow: hidden，否则滑出部分会漏出来 - 所有图片必须等宽，否则
translateX(-index * width)会偏移 - 过渡时间统一写死在 CSS 里：
transition: transform 0.3s ease-in-out；JS 中改style.transition在 Safari 上可能失效
点击小圆点后轮播错乱的真正原因
现象是：点第 3 个点，图片到位了，但下一次自动播放却跳回第 2 张。根本原因是 currentIndex 没同步更新。
立即学习“前端免费学习笔记（深入）”；
- 点击事件中，必须同时做三件事：
更新 currentIndex、执行 translateX、高亮对应 dot——不能拆成多个异步步骤 - 指示点的
data-index值必须与图片数组下标严格一致（从 0 开始，别写成 1） - 快速连点时加防抖锁：
if (isTransitioning) return，并在transitionend事件里重置 - 切换前先清掉所有
active类或状态类，再设新状态，避免残留
移动端滑动支持为什么始终不触发
只监听 mousemove 或 click，在手机上等于没写。触摸事件链必须完整且防误判。
- 必须监听
touchstart、touchmove、touchend，不能用mousedown替代 -
touchmove中立即e.preventDefault()，否则页面会跟着上下滚动 - 方向判断只看 X 轴差值，Y 偏移超过 30px 就忽略本次滑动，防止斜划误触发
- 松手后，偏移量
Math.abs(offset) > width * 0.3才执行切换，否则回弹到原位
最易被忽略的点：浏览器标签页切走后，setInterval 可能被节流甚至暂停，回来时轮播卡顿或跳帧；要用 document.hidden 监听 visibilitychange 做主动暂停/恢复，而不是依赖定时器自然恢复。
