用left百分比+absolute定位做轮播错位，根本原因是父容器未设overflow:hidden、子项宽度未对齐，且left百分比相对于最近定位祖先计算，若其宽高不明确则基准漂移。
为什么用 left 百分比 + absolute 定位做轮播会错位
直接设 left: 0%、left: 100% 看似合理，但实际滑动后位置常偏移——根本原因是父容器没设 overflow: hidden，或子项宽度未严格对齐容器，导致百分比计算基准漂移。更关键的是：absolute 元素脱离文档流，其 left 百分比是相对于最近的 position: relative/absolute 祖先计算的，若祖先没设宽高，百分比就按初始包含块（比如 viewport）算，完全失准。
- 确保轮播容器（即
relative父级）有明确width和height，且设overflow: hidden - 所有轮播项必须宽度一致，推荐用
width: 100%而非flex或inline-block自适应 - 避免在轮播项上设
margin或padding，它们会干扰left的百分比定位精度
left 百分比切换时如何保证瞬时定位不闪动
手动改 left 值触发重排时，浏览器可能先渲染旧位置再跳到新位置，尤其在低端设备上明显。这不是 CSS 动画问题，而是定位值变更与渲染时机不同步所致。
- 给轮播容器加
will-change: left（仅对频繁切换的场景），提示浏览器提前优化图层 - 切换前先移除过渡效果：
element.style.transition = 'none'，设完left后offsetWidth强制回流，再恢复过渡 - 优先用
transform: translateX()替代left，它走合成层，无重排；若必须用left，至少加backface-visibility: hidden提升为独立图层
如何用 JavaScript 精确控制 left 百分比的切换逻辑
轮播索引和 left 百分比不是简单线性映射。比如 3 张图，第 0 张是 left: 0%，第 1 张是 left: -100%，第 2 张是 left: -200%——负号和倍数容易写反，且边界判断（如循环播放）易出错。
- 统一用
currentIdx * -100计算left值，避免手算百分比；索引从 0 开始，最大为items.length - 1 - 循环切换时，不要直接
idx = (idx + 1) % len，而应先更新left，再更新idx，否则动画未结束就触发下一次，left值会叠加错乱 - 监听
transitionend事件确认动画完成，再允许下一次操作；注意该事件在left和transform上触发名不同（transitionendvswebkitTransitionEnd）
移动端触摸滑动时 left 百分比如何响应拖拽
纯 CSS 无法实现拖拽，必须靠 JS 监听 touchstart/touchmove。此时 left 值需从固定百分比变为动态像素偏移，再换算回百分比，极易因容器宽度变化（如横竖屏）导致比例失真。
立即学习“前端免费学习笔记（深入）”；
- 拖拽中不要直接设
left百分比，改用transform: translateX(${delta}px)，避免重复计算百分比 - 松手瞬间，根据
delta判断是否超过阈值（如 30% 容器宽度），再决定是回弹还是切到下一项；此时才把目标位置转成left百分比并应用 - 务必监听
resize事件，重新获取容器offsetWidth，否则横屏后所有百分比定位都失效
用 left 百分比配合 absolute 做轮播，最脆弱的点不在切换逻辑，而在容器尺寸稳定性和单位换算一致性。一旦嵌入 flex 布局或响应式断点，100% 就可能指向不同基准——这时候不如直接用 transform + getBoundingClientRect() 算像素值，反而更可控。
