纯HTML无法实现图片轮播，因其缺乏定时器、状态管理和DOM操作能力；所谓“HTML轮播”实为HTML+JS或CSS radio手动切换，自动轮播必须依赖JavaScript。
纯 HTML 无法实现图片轮播——它没有定时器、没有状态管理、不能修改 src 或切换 class，所谓“在线运行”也改变不了这个事实。你看到的“HTML 轮播”，背后一定有 JavaScript 在驱动，或靠 CSS :checked + radio 实现手动切换（非自动）。
为什么直接写 HTML 标签堆一起没用
把多个 <img> 写进一个 <div>，浏览器只会静态渲染全部图片：要么并排挤满页面，要么叠在一起只显示第一张。轮播的核心动作——“3 秒后隐藏这张、显示下一张”——HTML 根本不具备执行能力。
- 常见误解是复制了某段“HTML 轮播代码”，结果发现要配
<script>才动，那本质就是 HTML + JS，不是纯 HTML - 有些在线编辑器（如 CodePen、JSFiddle）默认启用 JS 执行，容易误以为“HTML 自己动起来了”
- 若强行不写 JS，唯一接近轮播的是用 CSS
@keyframes+input[type="radio"]模拟点击切换，但无法自动、不可暂停、不响应键盘/触摸，且结构臃肿
最简可行的在线运行轮播：三行 JS 就够
在任意支持 JS 的在线环境（CodePen、JSBin、甚至浏览器控制台）粘贴以下代码即可运行，无需框架、不引外部资源：
<div id="carousel">
<img id="slide" src="https://www.php.cn/link/541c51438d38c7582b03d08fcf9b81ca/600/300?1" alt="1">
</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>放在</body>前，或用DOMContentLoaded包裹 - 图片路径 404：控制台出现
GET https://... 404不会中断 JS，但<img>高度塌陷为 0，整个轮播容器变一条线。务必确认所有src可访问，或加onerror回调兜底 - 在线环境默认关闭自动播放策略：部分平台（尤其移动端预览）会禁用
setInterval，需手动触发一次nextSlide()函数才能启动，此时应加一个“开始轮播”按钮
轮播真正的复杂点不在“怎么动”，而在“动得稳”：图片加载失败不塌陷、用户悬停时暂停、手动切换后自动轮播重置计时器、移动端 touch 滑动方向判断……这些都不是 HTML 能覆盖的边界，而是 JS 逻辑必须处理的现实条件。
