轮播图必须用div包裹图片而非直接并列img，因img为inline元素会导致宽度计算偏差、transform错位及flex换行；正确结构是外层carousel容器（固定宽高+overflow:hidden）套flex轨道，每张img设flex-shrink:0。
轮播图结构为什么必须用 div 包裹图片而不是直接放 img
直接写一串 <img src="a.jpg"><img src="b.jpg"> 看似省事，但 JS 没法统一控制显隐、CSS 难做平滑过渡——因为 img 默认是 inline 元素，行内间隙会导致宽度计算偏差，transform 位移错位，甚至在 flex 容器里被意外换行。
正确做法是用一个外层 div 当容器（加 overflow: hidden），再套一层轨道 div（设 display: flex），所有 img 作为直系子元素放进去：
<div class="carousel">
<div class="carousel-track">
<img src="1.jpg" alt="slide 1">
<img src="2.jpg" alt="slide 2">
<img src="3.jpg" alt="slide 3">
</div>
</div>-
.carousel必须设固定宽高 +overflow: hidden，否则滑出部分会露出来 -
.carousel-track必须用display: flex，不用float或inline-block—— 后两者响应式错位、间隙难控 - 每张
img建议加flex-shrink: 0，防止被 flex 自动压缩变形
transform: translateX() 为什么比 left 或 margin-left 更稳
用 left 或 margin-left 切换图片会触发浏览器重排（reflow），尤其在低端手机上明显卡顿；而 transform: translateX() 是 GPU 加速的合成操作，不改变文档流，支持小数位偏移，动画更顺滑。
关键 CSS 要写全：
立即学习“前端免费学习笔记（深入）”；
.carousel-track {
display: flex;
transition: transform 0.4s ease-in-out;
will-change: transform; /* 仅移动端加，防偶发闪烁 */
}- 过渡时间（
0.4s）必须和 JS 中setInterval的间隔匹配，否则自动轮播会“抽搐” - 别用
cubic-bezier(0.1, 0.7, 0.1, 1)这类复杂缓动——新手调不准，ease-in-out足够自然 - 移动距离必须严格等于
currentIndex * 单图宽度，建议用getBoundingClientRect().width动态读，别硬写300px
手动切换和自动轮播共存时最常踩的三个坑
新手写完能切图，一加自动播放就崩：点两下按钮图片跳回第一张、悬停没暂停、连点后动画闪退——核心是状态不同步 + 缺少锁机制。
- 每次切换前必须
clearInterval(timer)，再根据新状态重启定时器，否则旧定时器还在跑 - 加
isTransitioning标志位：动画执行中禁止响应点击或 touch，避免translateX被覆盖导致“闪一下又回去” - 用户点第 3 个指示点，必须同时更新
currentIndex和transform值，只改一个会导致下一次自动轮播逻辑错乱 - 悬停暂停要监听
mouseenter/mouseleave，移动端还得补touchstart/touchend，否则手指滑动时无法暂停
移动端 touch 滑动怎么写才不误判
PC 上用 mousemove 凑合，但手机上根本不会触发；只靠 clientX 差值判断方向也不行——手指斜划时 Y 偏移大，容易误判为上下滚动。
正确做法是记录起始 X，结束时算净偏移量：
let startX = 0;
carousel.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
});
carousel.addEventListener('touchend', e => {
const endX = e.touches[0].clientX;
const offset = startX - endX;
if (Math.abs(offset) > width * 0.3) {
offset > 0 ? nextSlide() : prevSlide();
}
});- 必须在
touchmove里调e.preventDefault()，否则页面会跟着上下滚动 - 判定阈值设
width * 0.3（单图宽的 30%），太小易误触，太大难响应 - 绝对值小于
30像素的偏移直接忽略，防手抖误触发
轮播图真正难的不是让图动起来，而是让「状态」始终一致：索引、位移、指示点、定时器、过渡锁，五者必须原子更新。漏掉任何一个，用户连点两次就崩。
