轮播失控最常见错误是未清理旧定时器，正确做法是用全局变量存储并每次启动前clearinterval；容器需设固定高度防抖动；按钮须用button[type="button"]防误提交；指示器需绑定data-index确保点击准确。
用 setInterval 控制切换但不清理旧定时器，轮播会失控
最常见错误是每次调用自动播放都直接 setInterval(switchImage, 3000)，而不先清除已有定时器。结果是鼠标悬停暂停后又恢复，或点击按钮切图时没重置，导致多个定时器并发运行——图片飞速乱跳，甚至卡死在空白帧。
正确做法是定义全局变量 let carouselTimer = null，每次启动前必须 clearInterval(carouselTimer)，再赋新值：carouselTimer = setInterval(...)。手动切换、mouseenter、mouseleave 都要走同一套清理+重启逻辑。
- 忘记清定时器 → 多个
setInterval同时执行 → 切图频率翻倍甚至失控 -
setTimeout递归模拟轮播 → 容易栈溢出，且无法统一销毁 - 用
img.complete检查加载状态 → 避免切换到未加载完的图出现空白
用 display: none 切换图片，但父容器高度不固定会抖动
纯靠显隐控制最轻量，但若轮播容器没设固定高度，每次 display: block 切换都会触发重排（reflow），导致页面跳动，尤其在图片尺寸不一致或加载延迟时更明显。
解决方法很简单：给 .carousel 容器加死高度，比如 height: 400px；所有 <img> 统一设 width 和 height 属性（不是仅 CSS），避免布局抖动。别用 visibility: hidden（占位）或 opacity: 0（仍响应事件、需额外 transition）。
- 容器无固定高 → 切图时高度塌缩再撑开 → 页面内容上下跳
- 图片没写
width/height属性 → 加载中留白区域大小不定 → 抖动加剧 - 用
<div class="carousel-item"> 包裹 <code><img>而非直接放<img>→ 更利于后续加过渡、懒加载等扩展左右箭头用
<button type="button"></button>，别用<a></a>或无type的<button></button>很多初学者用
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">←</a>做左箭头，点一下页面就跳到顶部；或者写<button>←</button>却没声明type="button"，在表单环境里默认是submit，一按就刷新页面。语义和行为都更稳的是
<button type="button" class="carousel-prev"></button>。它原生支持disabled，JS 中可直接btn.disabled = true禁用，且不会触发任何默认跳转。配合pointer-events: none或透明度灰显，视觉反馈也干净。-
<a></a>无href或仅https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b→ 点击滚动到页首 -
<button></button>缺type→ 在<form></form>内默认提交 → 整页刷新 - 按钮禁用后未同步更新指示器状态 → 用户点灰掉的按钮仍可能触发旧逻辑（需在 JS 中统一处理）
小圆点指示器动态生成但没绑定实时索引，点击失效或错位
指示器常通过 JS 动态生成
<li>并插入.carousel-indicators，但如果生成后没把每个<li>的点击事件和当前轮播索引对齐，就会出现：点第 2 个圆点却切到第 3 张图，或切图后圆点不亮。关键是在生成圆点时，用闭包或
data-index存储对应序号，事件处理器里读取该值并跳转：dots[i].dataset.index = i，点击时goToIndex(parseInt(this.dataset.index))。同时确保goToIndex()内部会同步更新当前激活项的active类和所有图片的display状态。- 用
for (let i = 0; i goTo(i) }→ 闭包陷阱，所有点都跳最后索引 - 生成圆点后没重新绑定事件 → DOM 更新后事件丢失
- 没在
goToIndex()里重置定时器 → 切图后 0.5 秒又自动切走
-
