纯CSS轮播依赖容器transform: translateX()位移与transition缓动，关键在移动容器可视区而非单图切换；JS仅更新transform值和索引，避免与CSS transition冲突，需处理无缝滚动、状态同步及性能优化。
用 transition 实现图片位置平滑切换
纯 CSS 轮播依赖的是对容器 transform: translateX() 的控制，配合 transition 做缓动。关键不是“切换图片”，而是移动整个图片容器的可视区域。
常见错误是给 transition——没用，因为轮播本质是位移容器，不是淡入淡出单张图。
- 容器需设
overflow: hidden，否则滑动时会看到溢出内容 - 所有图片放在一个
div内水平排列，总宽度 =100% × 图片张数 - 每次切换，修改该容器的
transform: translateX(-N%)，N 为当前索引 -
transition: transform 0.4s ease-in-out必须写在容器上，且不能被 JavaScript 动态移除（比如切到none）
JavaScript 控制轮播逻辑的核心要点
JS 不负责动画，只负责更新容器的 transform 值和维护当前索引。别用 setTimeout 硬写轮播节奏，容易累积延迟或卡顿。
- 用
setInterval+clearInterval管理自动播放，但必须在用户交互（如点击箭头、鼠标悬停）时暂停并重置定时器 - 索引越界处理要闭环：从最后一张切回第一张时，不要靠 JS 瞬间跳转（会闪），而是用「无缝滚动」技巧——克隆首尾图，初始偏移设为
-100%，让视觉起点落在真实第一张 - 避免直接操作
style.left或margin-left，优先用transform，性能更好且不触发重排 - 移动端需监听
touchstart/touchend计算滑动距离，但注意touchmove中别做重绘，只记录位移差
transition 和 JS 协同时最容易踩的坑
两者打架最典型的症状是：手动切换后自动轮播突然加速、倒退，或动画卡住不动。根本原因是状态不同步。
立即学习“Java免费学习笔记（深入）”；
- JS 修改
transform后，如果紧接着又触发了 CSS 类名切换（比如加.active），而该类也带transition，就会覆盖或冲突 - 不要在轮播容器上同时写
transition: all 0.4s——all会把opacity、height等无关属性也加上过渡，干扰定位 - 用
getComputedStyle(el).transform调试时注意：返回的是矩阵字符串，不是百分比，别拿它和索引直接比对 - 如果用了
will-change: transform提升性能，记得在轮播停止后移除，否则长期占用 GPU 资源
要不要用 requestAnimationFrame 替代 setInterval？
对于简单轮播，setInterval 完全够用；只有当你需要帧率敏感操作（比如拖拽跟随、物理缓动）才值得升级。
强行套 requestAnimationFrame 反而增加复杂度：你得自己管理时间戳、计算 delta、防抖动、处理页面隐藏时的暂停——这些浏览器已经用 setInterval 配合 visibilitychange 事件能稳妥解决。
真正该花时间优化的，是图片懒加载、transform 层级提升、以及触摸事件的 passive: true 标记，而不是替换计时器。
