最稳纯CSS轮播图用transform+transition实现，JS仅控制索引和位移，避免重排、明确transition属性、防定时器叠加、禁用animation主控。
轮播图用 transform + transition 实现最稳
纯 CSS 轮播图不依赖 JS 就能跑，关键在控制 transform: translateX() 和 transition 的配合。浏览器对 transform 的硬件加速支持好，动画顺滑，内存占用低。别用 left 或 margin-left 做位移——会触发重排，卡顿明显。
常见错误：给整个轮播容器加 transition，但没限制只作用于 transform，导致其他属性（比如 opacity）也带过渡，意外拖慢帧率。
- 始终写成
transition: transform 0.4s ease-in-out;，明确限定属性 - 每张图宽度设为
100%，父容器overflow: hidden - 用一个
div.carousel-track包住所有img，通过移动它来切换画面 - 初始状态设
transform: translateX(0)，第二张图就设translateX(-100%)，依此类推
自动轮播必须用 setInterval 配合 classList 切换
JS 只负责“换哪一张”，样式交还给 CSS。靠切换 .active 类或直接改 style.transform 都行，但前者更利于维护和复用。
容易踩的坑：setInterval 没清掉，用户切走页面再回来，多个定时器叠加，图片疯转；或者没做“鼠标悬停暂停”，体验断层。
立即学习“前端免费学习笔记（深入）”；
- 轮播开始前先
clearInterval(this.timer)，避免重复启动 - 绑定
mouseenter和mouseleave事件控制暂停/恢复 - 切换时用
element.style.transform = `translateX(${offset}%)`更直接，比 class 切换少一层 CSS 查找 - 偏移量计算统一用
-index * 100，确保整屏对齐，别用getBoundingClientRect().width动态算——响应式下易错位
@keyframes 不适合轮播图主切换动效
有人想用 CSS 动画替代 JS 控制，写个 @keyframes slide 然后靠 animation 循环播放。这方法看似简洁，但实际几乎不可控：无法暂停、无法跳转指定页、无法响应用户点击，且动画时间轴和 JS 逻辑脱节。
唯一可考虑的场景是「入场动效」——比如每张图进入视口时淡入+上浮，这种辅助效果可用 @keyframes 单独加在 img 上，配合 animation-fill-mode: forwards。
- 主轮播位移必须由 JS 驱动，否则交互等于瘫痪
- 如果真要用
animation，务必加animation-play-state: paused默认暂停，再用 JS 控制running/paused - 别给
carousel-track同时加transition和animation，两者冲突会导致跳帧或卡死
<div class="carousel">
<div class="carousel-track" id="track">
<img src="1.jpg" alt="1">
<img src="2.jpg" alt="2">
<img src="3.jpg" alt="3">
</div>
<button class="prev"></button>
<button class="next"></button>
</div>
<p><style>
.carousel { overflow: hidden; position: relative; }
.carousel-track {
display: flex;
transition: transform 0.4s ease-in-out;
}
.carousel-track img {
width: 100%;
flex-shrink: 0;
}
</style></p><p><script>
const track = document.getElementById('track');
let index = 0;
let timer;</p><p>function go(to) {
index = to;
track.style.transform = <code>translateX(${-index * 100}%)</code>;
}</p><p>function next() {
index = (index + 1) % 3;
go(index);
}</p><p>timer = setInterval(next, 3000);</p><p>document.querySelector('.next').onclick = next;
document.querySelector('.prev').onclick = () => {
index = (index - 1 + 3) % 3;
go(index);
};
</script></p>轮播图最难的不是动起来，而是让动和停都刚好卡在用户预期的位置——比如点击上一张按钮，不能等当前动画播完才响应，得立刻中断并跳转。这个细节多数人忽略，结果就是点完没反应，再点一次才动。
