纯HTML无法实现可靠自动播放，需JavaScript（如setInterval）或CSS动画；setInterval可控可中断，但需手动清理避免叠加；CSS轮播硬编码、难响应交互且不可维护；稳态切换需协调定时器、DOM更新与GPU加速。
纯 HTML 无法解决自动播放问题，必须引入 JavaScript 控制逻辑或 CSS 动画规则 —— 两者机制不同，适用场景和限制也完全不同。
为什么 setInterval 是最常用且可靠的自动播放方案
浏览器原生不提供“轮播”语义，setInterval 提供了可控、可中断、可重入的定时执行能力，是驱动索引切换 + DOM 更新的基础。它不依赖 CSS 渲染管线，也不受页面可见性（visibilityState）自动暂停的影响（这点反而需要你手动处理）。
- 每次调用前必须先
clearInterval(intervalId)，否则重复初始化会导致多个定时器叠加，图片飞速切换或内存泄漏 - 切换函数里要同步更新指示点（
dot.classList.toggle("active")）、img.src或transform偏移量，不能只改状态不触发视图更新 - 若使用
transform: translateX()切换，务必确保容器宽度 = 单张图宽 × 图片数，否则偏移计算会错位 - 移动端需监听
touchstart和pointerdown双事件，防止 Safari 点击穿透导致误触发
CSS @keyframes 自动轮播的硬伤在哪
它能实现「无 JS」的自动淡入淡出，但本质是把播放节奏写死在样式里，一旦图片数量变化或用户点击跳转，动画就彻底脱节。
-
animation-delay必须按图片顺序手工计算：第 n 张图的delay= (n−1) × 单张停留时间，3 张图每张 4 秒就得写0s、4s、8s - 无法响应
mouseenter暂停 ——animation-play-state: paused只对当前元素生效，而多张图是并行动画，暂停一个不影响其他 - 图片加载失败时，对应帧直接黑屏，CSS 无法 fallback 或重试
- 动画总时长 = 单张停留时间 × 图片数，动态增减图片时必须重新生成整个
@keyframes规则，实际项目中几乎不可维护
如何避免自动播放过程中的跳闪和卡顿
跳闪往往来自 DOM 更新与 CSS 过渡时机错配；卡顿则多因强制同步布局（layout thrashing）或未启用硬件加速。
立即学习“前端免费学习笔记（深入）”；
- 切换前先移除旧图的
transition，等 DOM 更新完成后再加回来，避免过渡属性在非激活态被意外触发 - 用
transform: translateZ(0)或will-change: transform启用 GPU 加速，但别滥用 —— 每个加了的元素都会额外占用纹理内存 - 不要在
setInterval回调里直接操作offsetWidth、getBoundingClientRect()等触发重排的 API - 首屏轮播图建议预加载所有图片：
images.forEach(src => new Image().src = src)，否则第一轮切换时可能空白
真正难的不是让图动起来，而是让动得稳、停得准、切得顺 —— 所有这些细节都藏在定时器清理、DOM 更新顺序、CSS 层叠上下文和浏览器渲染周期的咬合点里。
