HTML轮播的自动播放完全由JavaScript控制，autoplay属性仅对video/audio有效，对轮播容器无效；稳定实现需用setTimeout递归+transitionend监听，并原子化管理索引、定时器和DOM状态。
HTML轮播和自动播放没有必然关系——HTML 本身不提供任何轮播或自动播放能力，所谓“自动播放”完全由 JavaScript 控制，不是 HTML 标签的属性或行为。
为什么autoplay 属性对轮播图无效
autoplay 是 <video> 和 <audio> 的原生属性，对 <img>、<div> 或轮播容器毫无作用。试图在 <div class="carousel"> 上加 autoplay 属性，浏览器会直接忽略，既不报错也不生效。
- 常见错误：把
<img autoplay>当作轮播启动开关——它不会触发切换，只可能被当作无效属性丢弃 - 混淆来源：部分框架（如 Swiper）支持
data-swiper-autoplay这类自定义属性，但那是库内部解析的，不是 HTML 标准 - 真正起效的只有 JS 定时逻辑：
setInterval或递归setTimeout，配合 DOM 操作或 CSS class 切换
setInterval 启动自动播放时容易卡顿或跳帧
用 setInterval(nextSlide, 3000) 最直观，但实际运行中常出现“连切两张”或“停在黑屏”，根本原因是计时器与视觉动画不同步。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 如果轮播用了
transition: opacity 0.5s，而setInterval每 3 秒准时触发，可能在动画中途再次调用nextSlide()，导致样式冲突或状态错乱 - 页面切到后台标签页时，浏览器会节流
setInterval，恢复后可能一次性触发多次回调，索引直接越界（slides[5]→undefined） - 更稳的做法是改用
setTimeout递归 +transitionend事件监听：动画结束才设下一次定时，确保节奏贴合视觉反馈
鼠标悬停暂停后重新启动，索引容易错乱
暂停时仅 clearInterval 不够，重启时若直接复用旧定时器 ID 或未重置时间基准，会导致下一张提前/延后出现，甚至跳过当前项。
立即学习“前端免费学习笔记（深入）”；
- 必须在暂停时清除定时器，并在恢复时新建一个——不能复用已清除的 ID
- 推荐统一管理定时器句柄，比如用
let autoPlayId = null，每次启动前先clearTimeout(autoPlayId) - 更关键的是：暂停期间用户可能手动点击了“上一张”，此时
currentIndex已变，但定时器重启后仍按旧节奏走，必须确保nextSlide()总是基于当前最新索引计算下一项
最易被忽略的一点：自动播放的“稳”，不取决于动画多炫，而取决于索引更新、定时器清理、DOM 状态同步这三件事是否原子化执行——任一环节漏掉 classList.remove('active') 或多调了一次 clearTimeout，都可能让轮播在某个边缘场景下彻底失序。
