setinterval直接写会跑飞，因未清理旧定时器导致多个并行执行、索引错乱、cpu空耗；必须用全局变量存id、每次启动前clearinterval、交互时暂停并重置，且切换前检查img.complete防止闪白。

setInterval 控制自动切换最直接，但不清理旧定时器、不处理图片加载状态、不暂停交互，轮播必出问题。

为什么 setInterval 直接写会跑飞？

常见错误是只写 setInterval(switchImage, 3000)，没做任何防护。结果是：用户点下一页按钮后，上一个定时器还在运行，0.8 秒后又切一次；鼠标悬停时仍在自动切换；页面滚动到轮播图下方后它还在消耗 CPU。

• 必须用全局变量（如 let carouselTimer = null）保存当前定时器 ID
• 每次启动前先执行 clearInterval(carouselTimer)，再赋新值
• mouseenter 时清空，mouseleave 时重设（注意移动端无 hover，可忽略）
• 手动点击左右按钮或指示点后，也要调用 clearInterval(carouselTimer) 并立即重置

图片还没加载完就切换，为什么显示空白？

直接改 img.src 或设 display: block 后，浏览器还没把图片解码渲染出来，DOM 就已更新——尤其在弱网或大图场景下，必然闪白帧。

Baoyu Markdown To Html

将 Markdown 转换为微信兼容的样式化 HTML，支持代码高亮、数学公式、PlantUML、脚注、提示框、信息图以及可选机器人...

下载

• 切换前检查 img.complete === true，否则跳过本次切换
• 对未加载完成的图片，可监听 load 事件后触发一次 showImage(index)
• 避免用 new Image().src = url 预加载后不挂载 DOM，容易内存泄漏
• 懒加载场景下，建议配合 IntersectionObserver 只在视口内才初始化轮播

用 display: none 切换 vs transform 位移，怎么选？

二者不是“高级 vs 低级”，而是适用场景不同：display 切换简单可靠，transform 位移才能做滑动动画，但坑更多。

• 如果只要“一张图消失、下一张出现”，用 display: none / block 最稳，兼容性覆盖 IE9+
• 要用滑动效果，必须让所有 img 横向排列（display: flex 或 white-space: nowrap），父容器设 overflow: hidden
• translateX(-n * width) 的 width 必须是每张图**实际渲染宽度**（非 CSS width），建议统一用固定宽高属性（如 width="800" height="450"）
• Safari 对 style.transform 动态设置过渡可能不触发重绘，过渡时间必须写死在 CSS 中（如 transition: transform 0.3s ease-in-out）

移动端触摸滑动为什么没响应？

只绑 click 或 mouseenter，在手机上等于没写。轮播图一旦要支持触控，鼠标事件和触摸事件就得并存。

• 必须监听 touchstart 和 touchend，记录起始/结束位置，算出位移方向
• 避免同时监听 touch 和 mouse 事件导致双触发（iOS Safari 默认会模拟 mouse 事件），可用 if ('ontouchstart' in window) 分支处理
• 手势临界值别设太小（如位移
• 禁止默认行为：在 touchstart 里加 event.preventDefault()，防止页面滚动干扰

轮播图真正的复杂点不在“怎么动起来”，而在于状态同步：定时器、图片加载、用户交互、视口可见性、触摸手势，这五条线必须随时对齐。漏掉任意一环，轻则卡顿跳帧，重则定时器失控、内存暴涨。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！