轮播图容器必须设为相对定位，否则absolute定位图片会脱离预期范围；图片切换应使用transform而非left/top；自动播放需响应用户交互中断；无障碍需合理设置aria属性。
轮播图容器必须设为相对定位
如果 .carousel 或外层容器没加 position: relative，内部的 absolute 定位图片会脱离预期范围，可能飞到页面顶部或重叠在其他内容上。这点常被忽略，尤其当轮播图嵌在 flex 或 grid 布局里时，父容器的定位上下文容易丢失。
实操建议：
- 给轮播最外层包裹元素（比如
<div class="carousel">）显式设置 <code>position: relative - 避免依赖祖先元素“意外”提供定位上下文，尤其不要指望
body或html来兜底 - 用浏览器开发者工具检查
offsetParent，确认图片的absolute是相对于你预期的容器计算的 - 所有图片统一设为
position: absolute; top: 0; left: 0;，靠transform: translateX(-100%)控制偏移 - 用
transform: translateX(calc(-100% * {index}))配合 CSS 自定义属性或 JS 控制，比反复改left值更可靠 - 加上
will-change: transform（仅对当前活跃项）可进一步提示浏览器优化，但别滥用在所有图片上 - 用
clearInterval(this.timer)在用户操作（点击/悬停/触摸）时立刻清除定时器 - 恢复播放前重新
setTimeout或setInterval，不要复用旧 timer ID - 给轮播容器加
tabindex="0"，并在focus和blur时同步控制播放状态 - 整个轮播容器设
role="region" aria-label="产品推荐轮播" - 每张图片用
aria-roledescription="slide"，并配合aria-current="true/false"动态更新 - 指示器（dots）每个都要有
role="button"、aria-label="第{N}张，{描述}"，且支持键盘Enter/Space触发
图片切换要用 transform 而不是 left/top
用 left 或 top 动画切换图片会触发 layout + paint，帧率容易掉；而 transform: translateX() 只走合成器线程，更顺滑，尤其在移动端。
常见错误现象：滑动卡顿、快速切换时图片闪一下、iOS Safari 上动画撕裂。
实操建议：
自动播放时务必处理用户交互中断
轮播图自动播放（setInterval）却没监听 mouseenter/mouseleave，会导致鼠标悬停后还在切图，体验割裂；更严重的是，用户点按钮切图瞬间，定时器可能刚好触发下一张，造成“点一次跳两张”。
使用场景：PC 端悬停暂停、移动端 touchstart 暂停、键盘 Tab 导航时保持焦点同步。
实操建议：
无障碍支持不能只靠 aria-hidden
很多人以为给非当前页图片加 aria-hidden="true" 就算完成无障碍，其实这会让屏幕阅读器完全跳过所有图片，用户无法得知轮播存在、有多少张、当前在哪张。
性能影响：过度使用 aria-live 区域可能引发重复播报；不加 role="region" 则语义缺失。
实操建议：
轮播图的难点不在“怎么动起来”，而在“动得准、停得稳、读得懂”。很多样式崩坏或交互错乱，根源是定位上下文错位、动画属性选错、或状态管理脱节——这些地方一旦写死，后期改起来比重写还费劲。
