纯css无法实现可靠暂停的自动轮播，必须用js控制setinterval+transform移动并维护isplaying状态，兼顾移动端、可见性切换和边界情况。
用 animation 实现自动播放的旋转木马，但无法暂停
纯 CSS 的 @keyframes + animation 能实现自动轮播，但浏览器不提供原生暂停 API —— 你不能用 CSS 控制动画暂停，animation-play-state: paused 只能靠 JS 切换 class 触发，本质还是 JS 驱动。
常见错误是写个 animation: rotate 10s infinite 就以为“自动播放+暂停”都解决了，结果发现鼠标悬停加 :hover { animation-play-state: paused } 在移动端失效（没 hover），且无法响应按钮点击。
- 移动端无
:hover，悬停暂停策略直接失效 -
animation-play-state无法通过 CSS 自己触发，必须配合 JS 修改 class 或内联样式 - 轮播图通常需同步控制多个元素（图片、指示器、按钮），CSS 动画难以协调状态
用 setInterval + transform: translateX 手动控制轮播位移
更可控的做法是放弃 CSS 动画自动循环，改用 JS 定时移动容器 transform，同时暴露 play() / pause() 方法。
关键点：轮播容器设为 overflow: hidden，子项横向排列，每次移动一个视口宽度（或固定像素），用 transition: transform 0.3s ease 实现滑动效果。
- 避免用
left或margin-left移动，重排版开销大；transform是合成层，性能更好 - 计时器用
setInterval，但必须在pause()时clearInterval，否则内存泄漏 - 手动移动后要更新当前索引（
currentIndex），否则下一次播放可能跳帧或错位
let timer = null;
function start() {
timer = setInterval(() => {
currentIndex = (currentIndex + 1) % items.length;
carousel.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
}, 3000);
}
function pause() {
clearInterval(timer);
timer = null;
}
给轮播加播放/暂停按钮并绑定真实状态
按钮本身不决定状态，只触发方法；真实播放状态应由变量（如 isPlaying）维护，避免多次点击 start() 导致多个定时器叠加。
- 点击“播放”前先检查
if (!isPlaying) start()，防止重复启动 - 点击“暂停”后立即设
isPlaying = false，别等定时器自然结束 - 按钮文案/图标应随
isPlaying实时更新，比如用button.textContent = isPlaying ? '⏸' : '▶' - 如果轮播支持键盘操作（如空格键切换），也要同步读写
isPlaying
兼容性与边界情况处理
自动轮播最常崩在页面切到后台标签页时：Chrome 会降频甚至暂停 setInterval，导致恢复后一次性触发多次回调，轮播跳好几帧。
- 用
document.hidden监听页面可见性：document.addEventListener('visibilitychange', ...) - 切到后台时
pause()，切回前台时start()（不是 resume，因为计时器已销毁） - 首次加载时，确保 DOM 渲染完成再启动轮播，避免
itemWidth读成 0 - 轮播项数量 ≤ 1 时禁用自动播放逻辑，防止除零或无限循环
真正麻烦的不是“怎么转起来”，而是“什么时候不该转、转错了怎么拉回来”。状态同步比动画本身更费神。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
