手机网页轮播图需从结构、事件、css三处同步适配：用touchstart/touchend替代click和hover，overflow:hidden+transform:translatex()实现平滑位移，加intersectionobserver节流自动轮播，并处理图片加载失败。
手机网页轮播图不能只照搬桌面端写法，hover 无效、click 有 300ms 延迟、触摸事件没处理就会卡死——得从结构、事件、CSS 三处同步适配。
用 touchstart/touchend 替代 click 和 mouseenter
移动端没有鼠标悬停，mouseenter 和 mouseleave 完全不触发；原生 click 在 iOS/Android 上存在约 300ms 延迟，轮播响应会明显滞后。
- 必须监听
touchstart记录起始 X 坐标，touchend获取结束 X 坐标，算出滑动方向和距离 - 左右箭头按钮要加
touch-action: manipulation，避免系统默认的双指缩放或长按菜单干扰 - 禁用
onmouseover控制暂停逻辑，改用focusin+blur（适用于键盘导航）或直接移除悬停暂停（更合理） - 如果仍需“悬停暂停”，可退化为：页面失去焦点时（
document.addEventListener('visibilitychange')）暂停，回到前台再恢复
overflow: hidden + transform: translateX() 是唯一可靠布局
用 display: none 切换图片在移动端容易闪屏、重排剧烈，且无法做滑动动画；opacity 切换则残留交互区域。真正平滑、低功耗的方案是 CSS 位移。
- 父容器必须设
overflow: hidden，否则滑动时图片会溢出可见区 - 所有图片用
display: inline-block或flex横向排列，宽度统一（如width: 100vw），禁止用百分比+内容撑开 - 位移值严格按
translateX(-index * 100vw)计算，不要用left/right——Safari 对非 transform 动画优化差，掉帧明显 - 过渡必须写死在 CSS 里：
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)，JS 动态改style.transition在旧版 Android WebView 中常失效
自动轮播必须加 IntersectionObserver 节流
手机页面常含多个轮播组件（如首页 banner、商品推荐、底部广告），若每个都跑 setInterval，后台标签页仍在消耗 CPU 和电量，用户切走后还可能误触。
- 用
IntersectionObserver监听轮播容器是否在视口内，仅在isIntersecting === true时启动定时器 - 离开视口时调用
clearInterval，并清空intervalId变量，防止内存泄漏 - 别依赖
pagehide或visibilitychange兜底——它们在 PWA 离线场景或 Android 后台进程管理下不可靠 - 首次加载时，若轮播图在首屏，
IntersectionObserver会立即回调，无需额外判断
图片加载失败时 fallback 处理不能省
移动网络波动大，img 加载失败会导致空白帧、容器塌陷，甚至阻塞后续切换逻辑。
- 每张图必须设
alt和显式宽高属性（如width="375" height="200"），防止 FOUC - 绑定
onerror事件，加载失败时替换为占位图或隐藏该图：img.onerror = () => img.style.display = 'none' - 切换前检查
img.complete && img.naturalWidth !== 0，未完成加载就跳过本次切换，避免白屏 - 慎用
loading="lazy"：它与轮播自动播放冲突，首屏图可能被延迟加载，造成初始黑块
最易被忽略的是 touch 事件的 cancelable 判断和 preventDefault 时机——滑动过程中若未及时 preventDefault()，系统可能触发默认滚动，导致轮播和页面一起动；但过早阻止又会影响页面内嵌滚动容器。这个边界需要实机反复调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
