HTML无自动播放能力，轮播自动播放靠setInterval定时触发DOM更新；CSS动画实现轮播存在状态不可控、维护困难等硬伤；视频需满足autoplay+muted+用户交互才可播放；图片需预加载并合理控制显隐以避免空白。
HTML轮播和自动播放不冲突，但“自动播放”根本不是HTML的事——它压根没这个能力，自然谈不上冲突。
setInterval 是轮播自动播放的事实标准
所谓“自动播放”，本质是 JS 定时触发 DOM 更新：改索引、切样式、更新 translateX 或 opacity。setInterval 因其语义明确、控制直接、兼容性好，成为最常用手段。
- 别用
setTimeout递归代替——容易因异步延迟累积导致节奏漂移 - 每次调用前必须先
clearInterval再重设，否则悬停恢复后可能叠加多个定时器 - 用户悬停时仅
clearInterval不够，还得记录上一次触发时间戳，恢复时用差值判断是否跳过漏掉的轮次 - 移动端 Safari 在后台标签页会深度节流
setInterval，恢复时可能连切三张——需在恢复逻辑里加取模校验：currentIndex = (currentIndex + Math.floor(elapsed / interval)) % slides.length
CSS 动画做自动播放会出哪些硬伤
用 @keyframes + animation 实现轮播，看似“不用 JS”，实则埋雷密集：
- 切换指示点时，
animation时间轴无法重置，强行animation-play-state: paused再 play 会导致闪帧或卡死 - 没有
currentIndex变量，后续加暂停按钮、API 控制、键盘导航、屏幕阅读器支持全得绕弯子补状态 - 动画 delay 硬编码在 CSS 里，想动态改间隔（比如用户调速）只能靠 JS 操作
style.animationDuration，但会丢失当前帧位置 - 图片增删后，
@keyframes的关键帧数和百分比必须同步手改，不可维护
轮播容器里嵌视频时的 autoplay 陷阱
轮播图本身不会干扰自动播放，但里面塞 <video></video> 就另当别论了——浏览器策略只认媒体元素，不管它在不在轮播里：
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足：
autoplay+muted+ 用户已触发过交互（如 click/touchstart），否则play()被静默拒绝 - 轮播切换到某张含视频的 slide 时，不能只改
display或opacity，得真调用video.play()；切走时务必video.pause()，否则音频可能继续播 - 动态插入的视频（比如懒加载后 append），
play()必须在节点挂载到 DOM 后立即调用，延迟哪怕 1ms 都可能失败 - iOS Safari 要求首次
play()必须由用户手势直接触发，不能包在 setTimeout 或 Promise.then 里
图片切换瞬间空白？预加载和 DOM 切换顺序很关键
自动播放卡顿、闪白，90% 出在资源加载和 DOM 更新时机错配：
- 不要等
click或定时器触发时才设置img.src，应在轮播初始化阶段就用new Image().src = url预热缓存 - 用
transform: translateX()切换时，确保所有图片都已渲染完毕再启动定时器，否则首帧位移可能失效 - 避免用
display: none控制显隐——触发布局重排；改用opacity: 0+visibility: hidden+pointer-events: none - 无缝循环需要克隆首尾图，但克隆节点的
src不会自动继承原图缓存，得手动赋值或复用Image实例
真正难的不是让图动起来，而是动得稳、切得准、停得顺、切回来不丢帧——这些细节藏在定时器清理、状态同步、资源预热和浏览器行为适配里，一环松动，整个轮播就飘。
