原生html触摸轮播关键在于松手后精准停驻与状态同步：须用touchstart/move/end事件，禁用mousemove；touchmove中仅记录偏移、调用preventdefault、依赖clientx；松手后按动态阈值slidewidth×0.3判断切换或回弹；手动操作后重置定时器并加istransitioning锁确保状态原子化。
原生 HTML 实现触摸轮播，关键不是“能不能滑”，而是松手后是否能准确停在整张图上、状态是否和视觉一致。用 touchstart/touchmove/touchend 是唯一可靠路径，mousemove 在手机上根本不会触发。
为什么 touchmove 直接改 translateX 会抖动？
常见错误是每次 touchmove 都直接设置 element.style.transform = `translateX(${x}px)`，导致位移被高频覆盖，手指稍一停顿就卡住，松手后还残留偏移。
- 正确做法：只记录起始
clientX和当前偏移量，不直接驱动 DOM；动画交给requestAnimationFrame或 CSStransition处理 - 必须在
touchmove中调用e.preventDefault()，否则页面会跟着上下滚动 - 别用
pageX或screenX——它们受缩放、滚动影响；只依赖touches[0].clientX
touchend 后怎么判断该切图还是回弹？
松手瞬间的滑动距离（offset）决定行为：太小就回弹，够大才切换。硬编码阈值容易在不同设备上失效。
- 推荐阈值：
Math.abs(offset) > slideWidth * 0.3，其中slideWidth用element.getBoundingClientRect().width动态读取 - 切换目标索引要校准：
currentIndex = Math.max(0, Math.min(slides.length - 1, currentIndex + (offset > 0 ? -1 : 1))) - 回弹不能靠 setTimeout 延迟执行——要用
transition或requestAnimationFrame确保帧率稳定
手动滑动后自动轮播节奏错乱怎么办？
用户滑完一张，setInterval 还按原节奏跑，下一张会“提前挤进来”，看起来像抽搐。这不是动画问题，是定时器和状态没对齐。
- 每次手动操作（点击按钮、滑动结束）后，必须重置定时器：
clearInterval(this.timer)→this.timer = setInterval(...) - 更稳妥的做法是用布尔开关 + 时间戳判断：记录上次切换时间，
requestAnimationFrame中检查是否超时再触发 - 标签页切走再回来时，
setInterval可能被节流，导致恢复时连切多张；用visibilitychange事件监听并重置状态
移动端圆点指示器点击失效或错位
点第 3 个点，图片切过去了，但高亮还在第 2 个——多数因为 data-index 和实际数组下标没对齐，或者点击时没同步更新 currentIndex。
-
data-index必须从0开始，和slides[0]对应；别写成data-index="1" - 点击事件里必须同时做三件事：更新
currentIndex、更新transform、更新所有指示器的aria-current或 class - 加
isTransitioning锁：动画进行中禁止响应新点击，否则会出现“闪一下又跳回去”
最易被忽略的是：滑动过程中如果触发了快速连续的 touchend（比如手指抬起又立刻点下），currentIndex 可能还没来得及更新就被覆盖。所有状态变更必须原子化，在同一个函数内完成，不能拆成异步步骤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
