轮播图导航点的核心是状态同步而非样式绘制，需用data-index绑定图片与导航点序号，统一事件绑定并确保goToSlide同时切换图片和高亮对应点，动态渲染时须等待DOM挂载完成。
轮播图加导航点（也就是底部那些小圆点）本质是两件事：同步更新当前激活点 + 点击跳转对应页。关键不在“怎么画点”，而在“怎么让点和图片状态保持一致”。
用 data-index 绑定轮播项与导航点
每个导航点要能准确对应某张图片，最稳妥的方式是用 data-index 属性标记序号，而不是依赖 DOM 顺序或 class 名。否则换结构、加插槽、动态增删项时极易错位。
- 轮播容器里每张图加
data-index="0"、data-index="1"… - 每个导航点也加对应
data-index，点击时读取它，再定位到同序号的图片 - 避免用
class="active"去查索引 —— 容易因样式干扰或初始状态不一致出错
querySelectorAll + forEach 批量绑定点击事件
导航点通常是动态生成的 <button> 或 <span>，别给每个都写独立 onclick 属性，统一用事件委托或遍历绑定更可控。
const dots = document.querySelectorAll('.carousel-dots button');
dots.forEach((dot, i) => {
dot.addEventListener('click', () => {
goToSlide(i); // 跳转逻辑封装好
});
});
- 确保
goToSlide(i)内部同时切换图片和同步高亮当前 dot - 如果轮播支持循环或自动播放，点击后记得重置定时器（
clearInterval后再startAutoPlay()） - 移动端需补
touchstart事件，防止点击延迟
切换时用 classList.toggle 控制激活态
导航点的“选中效果”靠 CSS 的 .active 类控制，JS 只负责开关这个类，不要直接改 style 或内联 opacity。
立即学习“前端免费学习笔记（深入）”；
- 先用
document.querySelector('.carousel-dots .active')清掉旧的 active - 再用
dots[i].classList.add('active')加上新的 - 或者更简洁：遍历所有点，用
dot.classList.toggle('active', dot === dots[i]) - 注意：如果导航点是用 JS 动态渲染的，必须等 DOM 挂载完成再执行这步，否则
querySelectorAll返回空列表
真正容易出问题的不是“怎么画点”，而是状态不同步 —— 图片切到第 2 张了，但第 3 个点还亮着；或者用户快速连点两次，导致计时器叠加、过渡卡顿。导航点只是表层，背后是轮播状态机是否健壮。
