轮播图本质是DOM元素位置/可见性的动态切换，通过transform+transition控制偏移量实现平滑滚动，无缝循环需复制首尾图并瞬移跳转，交互时须清除定时器防错乱。
轮播图本质是 DOM 元素位置/可见性的动态切换
轮播图不是“播放视频”，而是通过控制一组 比直接改 原生 CSS 方案无法真正“无限循环”，常见做法是：复制首尾两张图（即第 0 张放最后、最后一张放最前），初始位置偏移到真实第一张，轮播到“假末尾”时瞬间跳回真实起点（无过渡），视觉上就无缝了。 最常出问题的是「用户快速连点」导致定时器未清除、索引错乱、动画叠加。解决方式不是加防抖，而是：每次交互后立即清除旧定时器，并在新动作完成后重启。 立即学习“前端免费学习笔记（深入）”；display、opacity、transform: translateX() 等）+ 定时器（setInterval）实现视觉上的“滚动”效果。核心不在于动画多炫，而在于「哪张图该在可视区」这个状态的准确维护。
用
transform + transition 实现平滑位移（推荐）left 或 margin-left 更高效，能触发 GPU 加速，避免重排（reflow）。关键点在于：所有图片水平排列成一行，容器设为 overflow: hidden，再用 transform: translateX(-Npx) 控制偏移量。
width: 100vw），否则位移计算会错位-当前索引 × 单张图宽度，索引从 0 开始transition: transform 0.3s ease-in-out 要写在轮播容器上，不是单张图上setInterval 触发索引更新，手动切换按钮则直接修改索引并应用偏移.carousel {
overflow: hidden;
width: 100vw;
}
.carousel-track {
display: flex;
transition: transform 0.3s ease-in-out;
}
.carousel-item {
min-width: 100vw;
flex-shrink: 0;
}
如何处理循环播放（无缝衔接）
[last] [0] [1] [2] ... [n-1] [0]
transform 设为 translateX(-100vw)（跳过 fake-first）n（即 fake-last），立刻设为 translateX(-100vw) 并重置索引为 1transition 做这个跳转，否则会看到“倒退”动画点击小圆点或左右箭头时的常见 bug
轮播图看似简单，但 DOM 状态、定时器、CSS 过渡、用户交互四者耦合紧密；最容易被忽略的是「交互中断动画」和「无缝跳转时的 transition 关闭」——这两处不处理，用户就会看到闪动或卡顿。clearInterval(timerId) 在任何手动切换前执行dataset.index，不是简单 ++/--
n 张图，索引映射要取模：realIndex = (clickedIndex + n) % n
