HTML轮播图核心是缩略图与主图索引严格对齐：数量相等、data-index从"0"开始连续、用parseInt()转数字、事件委托绑定、统一active类操作，并提供hover/focus/active视觉反馈。
带缩略图的 HTML 轮播图，核心不是“加小图”，而是让每张 .thumb 精准控制对应索引的 .slide。只要数量、索引、同步逻辑三者对齐，样式和交互就自然成立。
缩略图和主图数量必须严格相等
常见错误是 .thumb 少一张，或多一张，或用 data-index="1" 开始编号。这会导致点击第 1 个缩略图却跳到第 2 张主图——因为 JS 里 "1" === 1 是 false，索引错位直接失效。
-
.slide有几张，.thumb就必须有几张，一个都不能少 - 所有
data-index必须是数字字符串，且从"0"开始连续："0"、"1"、"2"… - 初始状态要同步：
.slide:nth-child(1)和.thumb:nth-child(1)都得带class="active"
必须用 parseInt() 转换 dataset.index
DOM 的 dataset 取出的值永远是字符串，不转数字就无法和数组下标（number）比对。漏掉这步，整个切换逻辑会静默失败。
- 写成
const targetIndex = e.target.dataset.index→ 错误，"0" === 0为false - 正确写法是
const targetIndex = parseInt(e.target.dataset.index, 10) - 建议始终加第二参数
10，避免八进制意外解析
用事件委托绑定缩略图点击，别 forEach
如果缩略图后续可能动态增删（比如从 API 加载），用 document.querySelectorAll('.thumb').forEach(...) 绑定 click，新插入的 .thumb 就不会响应，老监听器还可能重复绑定。
立即学习“前端免费学习笔记（深入）”；
- 只监听一次父容器：
document.querySelector('.thumbnails').addEventListener('click', ...) - 在回调里用
e.target.classList.contains('thumb')判断是否点中目标 - 切换时统一操作所有
.slide和.thumb的active类，不要手动维护状态变量
缩略图必须有 hover/focus/active 视觉反馈
纯靠 .thumb.active 不够。用户需要知道当前在哪、点哪会跳转——尤其在键盘导航或触摸设备上。
- CSS 中至少补充：
.thumb:hover、.thumb:focus、.thumb:active - 别依赖 outline 默认样式，显式设
outline: 2px solid #007bff或类似 - 移动端注意加
touch-action: manipulation防双击缩放干扰
最易被忽略的是索引对齐和 parseInt() —— 这两个点一错，轮播看起来“点了没反应”，但控制台又没报错，排查起来特别耗时。
