核心是精准控制轮播图切换：用 showslides(n) 直接传目标索引并做边界校验，避免 slideindex 累加导致越界；自动轮播需保存 setinterval 返回值以便清除。
点击切换的 HTML 轮播图，核心不是“能不能切”，而是“切得准、不跳、不崩、状态同步”。只要 DOM 结构清晰、索引控制得当、事件绑定正确，不用框架也能稳稳运行。
用 showSlides(n) 精确控制显示哪张图
别用 slideIndex += n 这类累加逻辑——它会导致索引失控，比如连点两次“下一张”，slideIndex 变成 2 再变 3，但实际可能只有 3 张图（索引 0/1/2），结果越界后强制归 0 或归尾，中间图永远轮不到。正确做法是让每个按钮或指示点直接传入目标索引：
-
showSlides(0)显示第一张，showSlides(1)显示第二张，以此类推 - 函数内部先做边界校验：
n = n - 遍历所有
.slides img，只给目标索引的元素加class="active"，其余移除
左右按钮必须调用 clearInterval() 并重置定时器
用户点了一次“下一张”，自动轮播如果还在跑，1 秒后又切，体验极差。这不是功能叠加，是状态冲突。解决方法不是停了就不管，而是“暂停 + 从新位置续播”：
- 所有按钮点击事件里，先执行
clearInterval(timer)（前提是timer是全局变量或闭包可访问） - 更新当前索引（注意：如果是克隆首尾图结构，真实索引要映射回原始数组）
- 立刻调用
startAutoPlay()重启定时器，从当前图开始计时 - 漏掉任何一步，都可能出现“手动切完立刻又被自动逻辑覆盖”
图片加载失败时 <img> 高度为 0，轮播容器塌陷怎么办
本地测试好好的，一上服务器就出现空白幻灯片——八成是某张图 404 或跨域被拒。<img> 加载失败后默认高度为 0，整个 .carousel 容器就缩成一条线。不能靠 JS 监听 onerror 后再补高，太晚；得在 CSS 层兜底：
- 给
.slides img设固定宽高，或用min-height: 400px（根据设计定） - 配合
object-fit: cover防止变形 - 更稳妥的是加 SVG 占位：
<img src="broken.jpg" onerror="this.src='data:image/svg+xml,...'"> - 别依赖 JS 动态设
height，DOM 渲染顺序和加载时机不可控
指示点（dots）状态不同步的常见原因
点击圆点能切图，但切完圆点没高亮；或者手动切图后圆点还停在原位——根本问题在于状态没双向绑定。每个圆点应对应唯一索引，且所有触发源（按钮、圆点、自动轮播）都要统一更新它：
- 创建圆点时，用
data-index="0"、data-index="1"显式绑定索引 - 点击圆点时，取
e.target.dataset.index传给showSlides() -
showSlides(n)执行后，必须同步操作所有圆点：dots[i].classList.toggle('active', i === n) - 漏掉这一步，视觉状态和实际显示就脱节了
最易被忽略的是：所有事件监听器必须在 DOM 加载完成后绑定，且 timer 必须是可被清除的引用——写成 setInterval(() => {...}, 3000) 匿名调用，后面根本清不掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
