移动端轮播必须用 touchstart/touchend 替代 click/hover，用 transform: translateX() 和 overflow: hidden 实现平滑动画，配合 IntersectionObserver 节流定时器，并处理图片加载失败。
移动端轮播不能靠 click 或 hover，也不能用 left 或 margin-left 动画——前者有 300ms 延迟且不触发，后者在 Safari 上掉帧严重，滑动会卡顿甚至失灵。
touchstart/touchend 必须替代 click 和 mouseenter
手机没有鼠标悬停，mouseenter/mouseleave 完全不会触发；原生 click 在 iOS/Android 上存在约 300ms 延迟，轮播响应滞后明显。必须改用触摸事件链：
-
touchstart中记录e.touches[0].clientX为startX -
touchmove中只计算偏移offset = e.touches[0].clientX - startX，并立即调用e.preventDefault()阻止页面上下滚动 -
touchend中判断Math.abs(offset) > slideWidth * 0.3（slideWidth动态读取，别写死）才触发切换，否则回弹 - 左右箭头按钮需加
touch-action: manipulation，避免系统默认双指缩放或长按菜单干扰
overflow: hidden + transform: translateX() 是唯一可靠布局
用 display: none 或 opacity 切换图片，在移动端易闪屏、重排剧烈，且无法做滑动动画；left 触发重排，Safari 优化差，掉帧明显。真正平滑低功耗的方案是 CSS 位移：
- 父容器（如
.carousel-container）必须设overflow: hidden，否则滑出的图片会溢出可见区 - 所有图片塞进一个
.slides容器，设display: flex，每张图flex: 0 0 100vw（禁止用百分比+内容撑宽） - 位移严格按
transform: translateX(-currentIndex * 100vw)计算，不要用left或margin - 过渡必须写死在 CSS 里：
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)；JS 动态改style.transition在旧版 Android WebView 中常失效
setInterval 必须配合 IntersectionObserver 节流
手机页面常含多个轮播组件（如首页 banner、商品推荐、底部广告），若每个都跑 setInterval，后台标签页仍在消耗 CPU 和电量，用户切走后还可能误触：
立即学习“前端免费学习笔记（深入）”；
- 用
IntersectionObserver监听轮播容器是否在视口内，仅在isIntersecting === true时启动setInterval - 离开视口时必须调用
clearInterval(timer)并清空timer变量，防止内存泄漏 - 别依赖
pagehide或visibilitychange兜底——它们在 PWA 离线场景或 Android 后台进程管理下不可靠 - 手动切换（按钮点击、圆点点击、touchend）后，必须先
clearInterval再重启，否则轮播会“抽搐”
图片加载失败时 fallback 处理不能省
移动网络波动大，img 加载失败会导致空白帧、容器塌陷，甚至阻塞后续切换：
- 每张图加
onerror回调，例如：<img src="x.jpg" onerror="this.style.display='none'" alt="HTML移动端布局怎么做轮播？手机滑动效果制作" > - 轮播容器设最小高度（如
min-height: 200px），防塌陷 - 首次加载时，用
img.complete判断是否就绪，未完成则跳过本次切换 - 如果使用克隆首尾项实现无缝循环，要确保克隆图也带
onerror，否则首尾衔接处仍会露白
最易被忽略的是：overflow: hidden 必须加在最外层容器，不是 .slides；transform 动画必须写死在 CSS 里；touchmove 中不能直接驱动 DOM 位移——这些点一错，整个轮播就在真机上卡死或错位。
