纯html无法实现自动轮播，必须用javascript驱动；css动画仅能模拟循环但缺乏交互控制；推荐用classlist.toggle()切换.active类，配合css过渡实现可控轮播。
纯 HTML 无法实现自动轮播——它没有定时、状态切换或 DOM 操作能力，必须靠 JavaScript 驱动。CSS 动画（如 @keyframes）能模拟循环过渡，但无法响应用户暂停、点击跳转或动态更新图片列表，实际项目中不推荐单独使用。
用 setInterval 切换 src 最简但有风险
适合快速验证逻辑，或只有一张 <img> 标签的极简场景。核心是定时改 src 属性：
-
document.getElementById("banner").src必须在setInterval前赋初值，否则首图延迟显示 - 图片数组建议用变量声明，别硬编码在
src = "xxx.jpg"里，方便后续增删 - 网络慢时会白屏：新图未加载完，旧图已被替换，
src切换无 loading 状态控制 - 没预加载机制，第三张图第一次展示时可能明显卡顿
用 classList.toggle() 控制 .active 类更稳妥
这是目前最常用、兼容性好、易扩展的方案。所有图片并排定位，JS 只管开关 class，样式和动画交给 CSS：
- 每张图需包裹在统一容器内，设
position: relative；子项用position: absolute; top: 0; left: 0;叠在一起 - CSS 定义
.slide { opacity: 0; transition: opacity 0.4s; }和.slide.active { opacity: 1; } - 切换函数里先
slides.forEach(s => s.classList.remove("active"))，再给目标加active，避免残留 -
setInterval启动前务必手动调一次切换函数，确保首帧立即渲染，不等第一轮计时结束
鼠标悬停暂停必须加 clearInterval + 重置逻辑
不处理暂停是常见疏漏，用户根本来不及看清内容。直接 clearInterval(autoPlay) 不够，因为重新启动时索引可能错乱：
- 不要在
mouseleave里直接setInterval(nextSlide, 3000)—— 会叠加多个定时器 - 正确做法是：暂停时存当前
currentIndex，恢复时先清除旧定时器，再用新索引启动 - 更安全的写法是封装
startAutoPlay()和stopAutoPlay()，内部统一管理autoPlay变量 - 移动端无
mouseenter，需补充touchstart监听，否则在手机上无法暂停
真正难的不是让图“动起来”，而是让动的过程可控、可中断、不闪、不卡、不累积定时器——这些细节全在 JS 的状态管理和清理逻辑里，而不是结构或样式上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
