最稳妥的手写轮播图方案是用 transform: translateX() 配合 requestAnimationFrame 实现平滑过渡，结合 touchstart/move/end 精确处理拖拽与自动对齐，并在 touchend 后强制校准 currentIndex 以避免状态错位。
用 HTML + CSS + JavaScript 手写轮播图，不依赖框架
纯静态网页做轮播图，最稳妥的方式就是自己控制 transform: translateX() 和定时器。不需要引入 swiper 或 bootstrap，几行 JS 就能跑起来，关键是要避开自动切换卡顿、边界判断错乱、触摸中断失效这些坑。
- 所有图片必须放在同一个容器内，横向排列，宽度固定（推荐用
flex或inline-block） - 轮播容器设为
overflow: hidden，只显示一屏内容 - 用
setInterval触发位移，但每次移动前先清除上一个定时器，避免叠加 - 位移量 =
-currentIndex * slideWidth，currentIndex从 0 开始，最大值为slideCount - 1
touchstart / touchmove / touchend 实现手指滑动跟随
鼠标拖拽在桌面端可用 mousedown/mousemove/mouseup，但移动端必须用触控事件。重点不是“能动”，而是“松手后自动对齐最近一张”。常见错误是 touchmove 中直接改 transform 导致抖动，或没记录起始位置造成偏移错乱。
- 在
touchstart中记下touches[0].clientX作为startX -
touchmove里计算偏移差：currentX - startX，再加到基础位移上（临时效果） -
touchend时判断滑动距离是否超过阈值（如50px），超过则跳转下一张/上一张，否则回弹 - 注意：触发
touchmove后要调用event.preventDefault()，否则页面会跟着拖拽滚动
requestAnimationFrame 替代 setTimeout 做平滑过渡
用 setInterval 配合 transition 能实现切换，但手动滑动后立刻切图容易卡顿。真正顺滑的方案是把动画逻辑交给 requestAnimationFrame，自己算每一帧的位移进度。
- 切换开始时记录起始位置、目标位置、持续时间（如
300ms）和启动时间startTime = performance.now() - 在
raf回调中计算当前进度：progress = Math.min((now - startTime) / duration, 1) - 用缓动函数（如
cubic-bezier(0.25, 0.46, 0.45, 0.94)）调整 progress，再算出实时translateX - 这样即使用户中途又拖拽，也能立刻中断旧动画、启动新动画，不会堆叠
@@##@@ @@##@@ @@##@@
轮播图看似简单，最容易被忽略的是「触摸中断后的状态同步」——比如用户拖一半松手，此时 transform 值和 currentIndex 不一致，后续自动播放就会错位。每次 touchend 后务必重新校准 currentIndex，而不是只靠视觉位移。
立即学习“前端免费学习笔记（深入）”；
