纯HTML无法实现图片轮播，因其仅负责结构描述而无逻辑控制能力；轮播需JavaScript定时切换src或CSS配合交互实现显隐/位移，自动播放必须依赖JS。
纯 HTML 无法实现图片轮播——它没有逻辑控制能力，必须配合 JavaScript（或 CSS 动画+用户交互）才能自动切换或响应点击。
为什么只用 HTML 不行
HTML 是标记语言，只负责描述结构：<img> 标签能插入一张图，但不能“让它动起来”。所谓“轮播”，本质是定时替换 src、显隐切换元素、或移动容器位置，这些都需要运行时逻辑。
常见误解是看到某些“纯 HTML 轮播”示例，其实背后都悄悄引入了 JS（比如通过 <script> 标签），或者依赖 CSS @keyframes + :checked 伪类做手动触发式切换（非自动，且体验受限）。
最简可行的 JS 轮播（无框架）
以下代码直接嵌入 HTML 页面即可运行，仅用原生 JS 控制 img 的 src 和定时器：
立即学习“前端免费学习笔记（深入）”；
<div id="carousel">
<img id="carousel-img" src="1.jpg" alt="轮播图">
</div>
<script>
const images = ["1.jpg", "2.jpg", "3.jpg"];
let index = 0;
const img = document.getElementById("carousel-img");
function changeImage() {
index = (index + 1) % images.length;
img.src = images[index];
}
// 每 3 秒切一张
setInterval(changeImage, 3000);
</script>
要点说明：
-
setInterval是核心，控制切换节奏；数值单位是毫秒，3000 = 3 秒 -
(index + 1) % images.length实现循环取余，避免越界 - 图片路径需真实存在，否则控制台会报
404错误，但轮播逻辑仍继续执行 - 没加淡入淡出效果——因为 CSS 过渡需作用于
opacity或transform，而直接换src会闪一下；如需平滑，应预加载并切换显隐状态
用 CSS + radio 模拟“无 JS”轮播（仅限手动）
如果硬性要求“零 JS”，可用 CSS 的 :checked 配合隐藏的 <input type="radio"> 实现点击切换。但它无法自动播放，且需为每张图写一组标签，扩展性差。
关键限制：
- 必须点击圆点或箭头（用
<label>关联radio）才能切换 - 无法暂停/播放控制，也不能响应键盘方向键
- 所有图片需一次性加载进 DOM，大图多时影响首屏性能
- CSS 中需用
~或+选择器定位对应<img>，结构耦合度高
容易被忽略的细节
轮播不是“放上去就行”，实际项目中常踩这些坑：
- 图片尺寸不一致 → 容器高度跳变，建议统一设
img { width: 100%; height: auto; }或用object-fit: cover - 用户鼠标悬停时还在自动切换 → 应监听
mouseenter/mouseleave暂停/恢复setInterval - 页面后台标签页时，
setInterval可能被节流甚至暂停（尤其 Chrome），导致切图不同步；可用Page Visibility API检测可见性 - 无障碍访问缺失：没加
aria-live、没支持键盘Tab导航和Enter触发，对屏幕阅读器不友好
真正上线的轮播，99% 都会选 Swiper 或 KeenSlider 这类成熟库——它们已处理好手势、动画帧、内存释放、SSR 兼容等细节。手写仅适合学习原理或极简场景。
