缩略图导航必须与轮播项严格一一对应，data-index从0开始对齐JS索引，用事件委托绑定点击并parseInt转换索引，同步切换主图和缩略图active状态，配合CSS视觉反馈与touch-action防双击缩放。
缩略图导航必须和轮播项一一对应
轮播图加缩略图，核心不是“怎么显示小图”，而是让每张img缩略图能精准控制对应位置的主图。常见错误是缩略图数量和主图数量不一致，或点击后索引错位——比如点击第 3 个缩略图却跳到第 4 张主图。
<div class="carousel">
<div class="carousel-main">
<img src="1.jpg" class="slide active">
<img src="2.jpg" class="slide">
<img src="3.jpg" class="slide">
</div>
<div class="thumbnails">
<img src="1-thumb.jpg" data-index="0" class="thumb active">
<img src="2-thumb.jpg" data-index="1" class="thumb">
<img src="3-thumb.jpg" data-index="2" class="thumb">
</div>
</div>注意：data-index从 0 开始，和 JS 数组索引对齐；class="active"初始状态要同步设置在主图和缩略图上。
用事件委托绑定缩略图点击（避免重复监听）
如果缩略图是动态生成或可能增删，别用 forEach 给每个 .thumb 单独加 click。直接监听父容器，靠 event.target 判断是否点中缩略图更稳妥。
document.querySelector('.thumbnails').addEventListener('click', function (e) {
if (e.target.classList.contains('thumb')) {
const targetIndex = parseInt(e.target.dataset.index);
// 切换主图：移除所有 .active，给对应 .slide 加上
document.querySelectorAll('.slide').forEach((s, i) => {
s.classList.toggle('active', i === targetIndex);
});
// 同步缩略图高亮
document.querySelectorAll('.thumb').forEach((t, i) => {
t.classList.toggle('active', i === targetIndex);
});
}
});漏掉 parseInt() 会导致字符串比较（"0" === 0 为 false），这是最常踩的坑。
缩略图样式要支持聚焦/悬停反馈
用户需要明确知道当前在哪张、点哪张会跳转。纯靠 class="active" 不够，得配 CSS 视觉反馈：
.thumb {
width: 60px;
height: 40px;
object-fit: cover;
margin: 0 5px;
cursor: pointer;
opacity: 0.7;
border: 2px solid transparent;
}
.thumb.active,
.thumb:hover {
opacity: 1;
border-color: #007bff;
}
.thumb:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0,123,255,.5);
}特别注意：outline: none 要配合 box-shadow，否则键盘 Tab 导航时缩略图会“消失”——可访问性要求不能只靠鼠标。
移动端需防 touchstart 误触发双击缩放
在 iOS Safari 或部分安卓浏览器里，快速连点缩略图可能触发页面双击缩放，导致布局错乱。加一行 touch-action: manipulation 就能禁用双击缩放，同时保留点击响应：
.thumb {
touch-action: manipulation;
}不需要额外 JS 阻止默认行为，也不用监听 touchstart 再 preventDefault——那反而可能破坏滚动或长按等原生交互。 
