纯html无法实现自动轮播，必须用javascript通过setinterval控制定时切换并管理dom状态；css动画仅支持手动响应，不支持自动播放与暂停恢复；直接改img.src会导致闪屏、卡顿和错乱，因未预加载、无过渡且破坏渲染流。
纯 HTML 无法实现自动轮播——它没有执行逻辑的能力，setInterval 和 DOM 控制必须由 JavaScript 完成；CSS 动画方案（如 @keyframes + :checked）只能响应点击，不能自动播放，也不支持暂停/恢复。
为什么直接改 img.src 会闪、卡顿甚至错乱
这是新手最常踩的坑：用 document.getElementById('carousel-img').src = nextUrl 替换单张图的 src，看似简单，实则隐患多。
- 图片未预加载时，
src切换瞬间是空白，浏览器需重新请求+解码，造成明显“闪” - 若网络慢或某张图 404，
src赋值仍成功，但img元素会显示破碎图标，且定时器不受影响，继续切下一张 - 无法叠加淡入淡出效果——
opacity或transform过渡必须作用于已渲染的元素，而换src会中断当前渲染流 - 所有图片共用一个
<img>标签，意味着无法同时控制显隐状态，也做不到“上一张淡出 + 下一张淡入”的交叠动画
display: none 切换图片的实操要点
最稳妥的入门方案：用多个独立 <img> 标签，靠 CSS 控制显隐。关键不是“怎么写”，而是“怎么控”。
- HTML 结构统一用
<div class="carousel"> <img><img><img> </div>，不要嵌套在<ul></ul>或<figure></figure>里（除非你明确需要语义化） - 所有
<img>默认加style="max-width:90%"，首张额外加style="display: block;"—— 不要用visibility: hidden，它占位，可能撑高容器 - JS 切换时，先遍历全部
img设display: none，再设目标索引为display: block；顺序反了会导致两张图同时可见 - 给
.carousel设固定高度（如height: 400px），否则display切换会触发重排，页面跳动 - 图片必须带
alt和显式宽高（width="600" height="400"），避免加载中抖动
自动轮播必须配暂停逻辑，否则必出问题
只写 setInterval(switchImage, 3000) 是危险操作，几乎所有线上轮播 bug 都源于此。
- 定义全局变量
let carouselTimer = null，每次调用setInterval前先clearInterval(carouselTimer) - 绑定
mouseenter到.carousel容器，触发时clearInterval(carouselTimer)；mouseleave时重新启动 - 左右按钮和指示点点击后，必须立刻调用
resetTimer()（即先清再设），否则用户刚点到第2张，0.8秒后又跳到第3张 - 别用
setTimeout递归模拟轮播——容易堆栈溢出，且无法统一清理 - 移动端无
hover，mouseenter/mouseleave可跳过，但按钮点击重置定时器这步不能省
真正难的不是让图动起来，而是让动得稳、停得准、切得顺。多数人卡在「定时器没清理」和「DOM 状态没归一」这两点上，反复检查 carouselTimer 是否被复用、每次切换前是否清空了所有 display: block，比调样式更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
