缩略图导航必须与主图严格一一对应：data-index须从"0"起始连续编号，数量、顺序、active状态、事件委托绑定及parseint转换缺一不可，否则导致跳转错位、状态不同步或触控失效。
缩略图导航必须和轮播项严格一一对应，否则点击后跳转错位、active状态不同步、移动端 touch 事件失效——这是最常卡住人的地方。
缩略图与主图的 data-index 必须从 0 开始对齐
HTML 中每个 .thumb 的 data-index 值要和 .slide 在 DOM 中的顺序完全一致，且从 0 起始：
<div class="carousel-main"> @@##@@ @@##@@ @@##@@ </div> <div class="thumbnails"> @@##@@ @@##@@ @@##@@ </div>
- 漏掉
data-index或写成"1"（字符串）会导致parseInt()失效或比较失败 - 缩略图数量 ≠ 主图数量时，
document.querySelectorAll('.thumb')和document.querySelectorAll('.slide')长度不等，遍历时索引越界 - 初始
class="active"必须同时设在第一个.slide和第一个.thumb上，否则视觉起始状态就错
用事件委托绑定 .thumbnails 点击，别 forEach 单独加监听
动态增删缩略图（比如从 API 加载）、或使用框架渲染时，直接给每个 .thumb 绑 click 会漏事件或重复绑定。正确做法是监听父容器：
document.querySelector('.thumbnails').addEventListener('click', function(e) {
if (e.target.classList.contains('thumb')) {
const targetIndex = parseInt(e.target.dataset.index, 10);
// 切换主图
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(e.target.dataset.index, 10)，不加基数 10 时遇到"08"会被当八进制解析成 0 - 别用
e.target.dataset.index === targetIndex做判断——字符串和数字永远不等 - 移动端需额外加
touch-action: manipulation到.thumbnails，防双击缩放干扰点击
响应式缩略图布局：用 flex + min-width 控制换行，别用固定 width
缩略图在小屏上不能堆成一长条溢出，也不能强行压缩变形。CSS 要兼顾可读性与自适应：
.thumbnails {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 0;
touch-action: manipulation;
}
.thumb {
width: 60px;
height: 40px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
}
@media (max-width: 768px) {
.thumb { width: 48px; height: 32px; }
}
@media (max-width: 480px) {
.thumbnails { justify-content: center; }
.thumb { width: 40px; height: 26px; }
}
-
flex-shrink: 0防止缩略图被压缩变形；object-fit: cover保证裁剪比例一致 - 不用
width: 20%这类百分比，因为缩略图数量变化时布局会崩（比如 2 张 vs 5 张） - 所有尺寸用 px 而非 rem/em，避免字体缩放影响缩略图点击热区
缩略图导航真正难的不是显示小图，而是让每张 .thumb 的 data-index、JS 数组索引、CSS 激活态、以及用户点击预期四者严丝合缝——少检查其中一环，就会出现“点第三张却切到第四张”这种无从 debug 的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
