最稳的原生html轮播图用setinterval控制节奏、transform: translatex()切换，需同步currentindex与位移、防重排卡顿、加istransitioning锁、统一过渡时长、确保状态一致。
用 setInterval + 定时切换 transform 是最稳的起点
原生 HTML 轮播图不依赖框架，核心就两件事：视觉切换 + 自动轮播。用 setInterval 控制节奏、用 transform: translateX() 移动容器，比操作 display 或 opacity 更顺滑，也避免重排。
常见错误是直接改 left 或 margin-left，导致触发重排、卡顿；还有人用 setTimeout 递归调用，忘记清定时器，切页后旧定时器还在跑，图片突然跳回第一张。
- 每次切换前先
clearInterval(this.timer)，再设新定时器 - 轮播容器必须设
overflow: hidden，否则滑出部分会露出来 - 移动距离要严格对应单张宽度（含 gap），建议用
getBoundingClientRect().width动态读，别硬写300px
点击小圆点切换时，currentIndex 和 translateX 必须同步更新
用户点第 3 个指示点，你得立刻把容器拉到第 3 张位置，同时更新当前索引。很多人只改了 translateX，没更新 currentIndex，结果下一次自动轮播还是从旧索引开始，逻辑就乱了。
更隐蔽的问题是：点太快（比如连点两次第 2 个点），动画还没结束又触发新位移，transform 值被覆盖，出现“闪一下又回去”的现象。
立即学习“前端免费学习笔记（深入）”；
- 加个
isTransitioning标志位，动画中禁止响应点击 - 所有状态变更（
currentIndex、translateX、指示点高亮）必须在同一个函数里完成，不要拆成多步异步更新 - 小圆点的
data-index值要和图片数组下标一致，别从 1 开始数
移动端 swipe 滑动要用 touchstart/touchmove/touchend，不是 mousemove
PC 上用鼠标拖拽能凑合，但手机上 mousemove 根本不触发，必须监听触摸事件。而且不能只靠 clientX 差值判断方向——手指斜着划，Y 方向偏移大，容易误判为上下滚动。
典型翻车现场：滑动松手后图片没吸附到最近一张，停在半路；或者快速来回滑两下，currentIndex 变成负数或超长。
- 记录
touchstart的clientX，在touchend算差值，绝对值小于 30 不触发切换 - 滑动结束时，根据剩余偏移量决定是回弹还是切到下一张：
Math.abs(offset) > width * 0.3才切换 - 记得在
touchmove里e.preventDefault()，否则页面会跟着上下滚动
transition 时间和 setInterval 间隔不匹配，会导致轮播“抽搐”
比如设了 transition: transform 0.4s ease，但 setInterval 每 3s 触发一次，看起来没问题；可一旦用户手动切换过，动画时间还是 0.4s，而自动轮播的节奏已被打乱，下一张就会“提前挤进来”，像卡帧。
更麻烦的是 Safari 对 transform + transition 的渲染优化比较激进，有时动画中途被中断，残留未清除的 transform 值，后续切换全错位。
- 统一用 CSS 自定义属性控制过渡时长：
style.setProperty('--duration', '0.4s')，JS 和 CSS 都读它 - 自动轮播触发前，先确保上一个动画已完成：
el.addEventListener('transitionend', handler, { once: true }) - 别在
transition运行中强行设置新transform，先移除 class 或重置transition: none再设值
轮播看着简单，真正难的是各种交互叠加后的状态一致性——点、滑、自动播、暂停、窗口失焦再回来，每个环节都可能让 currentIndex、DOM 位移、定时器三者脱节。盯住这三者的同步时机，比堆效果重要得多。
