纯HTML+CSS轮播图可用display:none实现稳定切换：先统一隐藏所有图片再显示目标图，容器设固定高度防抖动，定时器需clearInterval清理并悬停暂停，按钮用type="button"并带data-index，确保快速点击、悬停、切页等边界下状态准确。
轮播图不是非得用 Swiper 或 Bootstrap 才能跑起来——纯 HTML + CSS + display: none 切换，三分钟就能让三张图动起来。关键不在“怎么炫”，而在“怎么稳”：图片不重叠、按钮不卡顿、定时器不打架。
用 display: none 控制显隐最直接
别一上来就搞 transform 或 opacity 动画，先确保“只有一张图显示”这件事不出错。
- 所有
<img>默认加style="display: none;"，第一张额外加style="display: block;" - 切换时必须先遍历所有
<img>，统一设回display: none，再设目标索引那张为display: block；顺序反了就会残留 - 不用
visibility: hidden—— 它仍占布局空间，可能撑开容器高度，导致页面跳动 - 容器（如
<div class="carousel">）建议设固定高度，比如height: 400px，避免display切换触发重排抖动
setInterval 必须配 clearInterval 清理
只写 setInterval(next, 3000) 是典型隐患：用户点按钮后定时器还在跑，下一秒又切，图片乱跳。
- 声明全局变量
let carouselTimer = null - 每次启动前先执行
clearInterval(carouselTimer)，再赋新值 - 在
next()和prev()函数末尾调用resetTimer()，保证手动操作后重新计时 - 给轮播容器加
mouseenter/mouseleave监听：悬停时clearInterval，移出时重设，移动端可忽略（无 hover）
导航按钮必须用 <button type="button">
用 <a> 或没设 type 的 <button>，JS 失效时会刷新或跳页；用 <span> 则无法禁用、不支持键盘焦点。
立即学习“前端免费学习笔记（深入）”；
- 每个按钮带
data-index="0"、data-index="1"等，比用 class 解析更可靠 - 点击后立即调用
showImage(index)，而不是在定时器里硬编码逻辑，方便复用和测试 - 不要用
setTimeout递归模拟轮播——不好清理，且容易因 JS 阻塞导致延迟累积 - 左右箭头按钮建议加
disabled属性控制状态，比如当前是第一张时禁用“上一张”按钮
真正难的不是让图动起来，而是当用户快速连点三次“下一张”、同时鼠标悬停、又切到其他标签页再切回来时，轮播还能准确停在第 2 张且定时器只有一份——这些边界情况，全靠 clearInterval、显式重置索引、以及每次切换前清空所有 display 状态来兜底。
