纯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免费学习笔记（深入）”；
