纯html无法实现图片轮播，因其缺乏定时器、状态管理和dom操作能力；所谓“html轮播”实为html+js或css radio手动切换，自动轮播必须依赖javascript。
纯 HTML 无法实现图片轮播——它没有定时器、没有状态管理、不能修改 src 或切换 class，所谓“在线运行”也改变不了这个事实。你看到的“HTML 轮播”，背后一定有 JavaScript 在驱动，或靠 CSS :checked + radio 实现手动切换（非自动）。
为什么直接写 HTML 标签堆一起没用
把多个 <img> 写进一个 <div>，浏览器只会静态渲染全部图片：要么并排挤满页面，要么叠在一起只显示第一张。轮播的核心动作——“3 秒后隐藏这张、显示下一张”——HTML 根本不具备执行能力。
<ul>
<li>常见误解是复制了某段“HTML 轮播代码”，结果发现要配 <code><script></script> 才动，那本质就是 HTML + JS，不是纯 HTML
@keyframes + input[type="radio"] 模拟点击切换，但无法自动、不可暂停、不响应键盘/触摸，且结构臃肿最简可行的在线运行轮播：三行 JS 就够
在任意支持 JS 的在线环境（CodePen、JSBin、甚至浏览器控制台）粘贴以下代码即可运行，无需框架、不引外部资源：
<div id="carousel">
@@##@@
</div>
<script>
const images = [
"https://www.php.cn/link/541c51438d38c7582b03d08fcf9b81ca/600/300?1",
"https://www.php.cn/link/541c51438d38c7582b03d08fcf9b81ca/600/300?2",
"https://www.php.cn/link/541c51438d38c7582b03d08fcf9b81ca/600/300?3"
];
let i = 0;
const img = document.getElementById("slide");
setInterval(() => {
i = (i + 1) % images.length;
img.src = images[i];
}, 3000);
</script>
- 图片用 picsum.photos 免费占位图，避免本地路径 404 导致控制台报错中断逻辑
-
setInterval是关键，3000 表示每 3 秒执行一次；数值太小（如 100）会导致图片加载未完成就切走 -
(i + 1) % images.length实现循环取余，比if (i >= len) i = 0更简洁且不会越界 - 首次加载时已通过
img.src = ...显式设好第一张，避免页面空白 1 秒
在线调试时最容易忽略的三个坑
在 CodePen 等平台测试时，这些细节常导致“代码明明一样却不轮播”：
-
document.getElementById("slide")返回null：说明 JS 执行时 DOM 还没加载完。解决方法：把<script></script>放在
