最稳妥的轮播实现需用 setinterval + queryselector 并处理定时器清理与图片加载状态：全局 timer 变量+clearinterval 防冲突，img.complete 检查防闪白，button[type="button"]保可访问性，css 设固定高、overflow:hidden 和声明式 transition。

setInterval + querySelector 是最稳妥的起点，不用框架也能跑起来，但必须处理定时器冲突和图片加载状态。

为什么直接写 setInterval(switchImage, 3000) 会出问题

常见错误是只启动定时器，不清理旧的——用户点一次“下一张”，再 hover 轮播图，又手动切两轮，结果三个 setInterval 同时运行，图片乱跳、索引错位、内存泄漏。

实操建议：

• 定义全局变量 let carouselTimer = null
• 每次调用 setInterval 前，先执行 clearInterval(carouselTimer)
• next()、prev() 和 showImage(index) 执行完都应调用重置函数，比如 resetTimer()
• 别用 setTimeout 递归模拟轮播——容易堆栈溢出，且无法统一清除

img.complete 必须检查，否则首屏常出现空白帧

网络慢或图片未缓存时，src 已设但渲染未就绪，直接切到这张图就会闪白。纯靠 display: none/block 切换挡不住这个问题。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

实操建议：

• 切换前遍历所有 img 元素，用 img.complete 判断是否加载完成
• 没加载完就 return，等下次定时器再试，避免跳过当前项导致节奏错乱
• 可加简单 fallback：给 img 设 style="background: #eee"，至少不露白底

导航按钮必须用 <button type="button"></button>

用 <a></a> 或无 type 的 <button></button>，在 JS 失效或报错时会触发页面跳转或刷新；用 <div> 则无法获得键盘焦点，损害可访问性。 <p>实操建议：</p> <ul> <li>每个按钮带 <code>data-index="0"、data-index="1" 等明确标识

点击后立即调用 showImage(parseInt(e.target.dataset.index))，再执行 resetTimer()

鼠标悬停轮播容器时，clearInterval(carouselTimer)；移出时重新启动——注意移动端无 mouseenter，这部分可跳过

CSS 层面最容易被忽略的三件事

结构看似跑通，但一上线就抖动、溢出、Safari 卡顿，往往卡在这几个 CSS 细节上：

• 轮播容器必须设死高度（如 height: 400px），否则 display 切换引发重排，页面跳动
• 若用 transform: translateX() 实现滑动，父容器要加 overflow: hidden，否则图片溢出可见
• transition 必须写在 CSS 规则里（如 .carousel-images { transition: transform 0.3s ease-in-out }），别用 JS 动态设 style.transition，Safari 不认

真实项目里，最难调的不是“怎么动”，而是“什么时候不该动”——图片没载入就切、定时器没清干净、hover 逻辑在移动端失效、CSS 过渡在旧 Safari 上掉帧。这些点不提前踩一遍，上线后 debug 成本远高于初期多写几行防护逻辑。