原生轮播图需用 HTML 结构、CSS（overflow: hidden + flex + transform）和 JS（setInterval + translateX + 定时器管理）协同实现，核心是裁剪+位移，手动操作必须清除并重置自动轮播定时器。
用 HTML + CSS + JavaScript 实现原生轮播图，不依赖任何插件
能做，但必须自己控制 transform 位移、setInterval 定时、transition 动画节奏，还要处理用户手动切换和自动轮播的冲突。纯靠 HTML 标签（比如 CSS 和 JS。
overflow: hidden 是轮播容器的硬性前提
所有轮播图底层都靠“裁剪+位移”实现，容器必须设 overflow: hidden，否则图片会撑开布局或溢出显示。
- 容器宽高需固定（如
width: 100%; height: 400px），不能靠内容自适应 - 内部轮播区域（）宽度 = 单张图宽 × 图片数，用
display: flex横向排列- 每张图宽高应一致，否则
transform: translateX()位移值难计算用
translateX()移动而非left或margin-lefttranslateX()触发 GPU 加速，动画更顺；而left或margin-left触发重排，卡顿明显，尤其在低端设备上。- 假设每张图宽
600px，当前显示第 2 张（索引为 1），则transform: translateX(-600px) - 不要用
style.left = '-600px'，它写的是内联样式，且强制重排 - 位移值建议用变量存，避免字符串拼接：
const offset = -currentIndex * itemWidth; track.style.transform = `translateX(${offset}px)`;
自动轮播与手动切换必须互斥
用户点下一页时，如果定时器还在跑，可能造成跳两页、错位、甚至
transform值叠加出负数偏移——这是最常被忽略的坑。立即学习“前端免费学习笔记（深入）”；
- 每次手动操作（点按钮 / 点指示器）后，立即
clearInterval(timer) - 操作完再重新
timer = setInterval(...)，保证只有一个定时器存活 - 轮播暂停（
mouseenter）也要清定时器，离开（mouseleave）再恢复，否则鼠标悬停后继续切图会很突兀 - 别用
setTimeout递归模拟轮播，它不可控，容易堆叠调用栈
轮播图真正的复杂点不在“怎么动”，而在“什么时候不该动”：用户干预的时机、触摸/点击响应的防抖、循环播放时首尾衔接的平滑处理（比如克隆首尾项）、键盘导航支持……这些细节一漏，体验就断层。原生做不是不行，但得一条一条补全逻辑链。
- 每张图宽高应一致，否则
