移动端banner轮播必须用touchstart/touchend控制且容器设overflow:hidden，否则ios safari等环境必卡顿；需用flex布局+transform位移、object-fit适配图片，touch事件仅记录起点与偏移、松手再决策，定时器须手动清理并加过渡锁防冲突。
移动端 Banner 左右滑动切换，必须用 touchstart/touchend 事件控制，靠 mousemove 或纯 CSS scroll-snap 在 iOS Safari 和部分安卓 WebView 上会失效或卡顿——这不是兼容性“建议”，是实际运行时必然翻车的点。
轮播容器为什么必须设 overflow: hidden
这是最常被漏掉的硬性前提。没设这个样式的轮播，.slides 里所有图片会横向铺开溢出容器，视觉上根本不是“轮播”，而是“一排图横着堆在页面上”。
- 必须加在最外层容器（比如
.carousel-container），不是.slides或.track - 如果父容器用了
position: absolute，要确保它有明确宽高，否则overflow: hidden失效 - 在 Safari 上若发现
transform不重绘，补一句transform: translateZ(0)或will-change: transform
flex 布局比 position: absolute 更稳
把所有图片塞进一个 .slides 容器，设 display: flex，每张图用 flex: 0 0 100% 占满视口宽度。位移只靠 transform: translateX(-currentIndex * 100%) 控制，逻辑干净、响应式自动适配。
- 绝对定位需手动维护每张图的
left值，索引错一点全乱 -
left触发重排，transform走合成器，动画更顺 - 图片宽高比不一致时，用
object-fit: cover替代width: 100%，避免容器高度跳动导致 touch 坐标偏移
touchstart/touchend 怎么写才不抖不卡
别在 touchmove 里实时改 translateX——高频调用会导致位移抖动、松手后残留偏移，甚至卡死。正确做法是只记起点、算差值、松手再决策。
-
touchstart记startX = e.touches[0].clientX -
touchmove只计算offset = e.touches[0].clientX - startX，并立即e.preventDefault()阻止页面上下滚动 -
touchend取endX = e.changedTouches[0].clientX，若Math.abs(endX - startX) > slideWidth * 0.3（别写死 50px，动态读取）才触发切换 - 用户手指一碰，就得
clearInterval(timerId)；松手后延时 3s 再重启，避免误触连播
手动切换后定时器怎么重置才不抽搐
用户点一次“下一张”，setInterval 还按原节奏跑，下一张就会在动画中途“挤进来”，看起来像帧率不稳。这不是 CSS 动画问题，是 JS 状态管理没做对。
- 每次点击按钮或触发 touch 切换，必须先
clearInterval(timerId) - 切换完成后再用
timerId = setInterval(...)重启，不能只清不重 - 加个
isTransitioning锁：动画进行中禁止新切换，防止状态冲突 - 浏览器切后台时监听
visibilitychange清理定时器，否则切回来可能连播 5 张
真正难的不是让图动起来，而是让每一次拖拽松手都落在该停的位置、让定时器和手动操作互不干扰、让不同宽高的图在各种机型上都不跳动——这些细节不压住，轮播就永远“差点意思”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
