纯html无法实现轮播图，必须结合原生javascript；其核心是用setinterval定时切换图片数组索引，并配合css控制显隐与布局，同时需处理加载、焦点、触摸等容错细节。
纯 HTML 不能做轮播图——它没有执行逻辑的能力，所谓“极简”，必须是 HTML + 原生 JavaScript 的最小可行组合，不引入任何框架或外部资源。
为什么不能只写 <img> 标签就轮播
HTML 只负责结构：<img src="1.jpg"> 能显示一张图，但无法让它“动起来”。轮播的本质是定时替换 src、切换显隐、或移动容器位置，这些都需要运行时控制。网上所谓“纯 HTML 轮播”示例，要么偷偷用了 <script></script>，要么靠 CSS :checked + <input type="radio"> 实现手动点击切换（无法自动）。
setInterval + 数组索引是最小可靠方案
用原生 JS 控制图片切换节奏，代码可直接嵌入 index.html，无需构建工具或依赖：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
const images = ["1.jpg", "2.jpg", "3.jpg"]：路径必须真实存在，否则控制台报404，但轮播逻辑照常运行 -
index = (index + 1) % images.length：取余确保循环，避免越界 -
setInterval(changeImage, 3000)：3000 是毫秒，即每 3 秒切一次；数值太小（如 500）会导致图片来不及加载就切走 - 不要直接改
img.src做淡入淡出——src替换会闪，平滑过渡需预加载 +opacity或transform切换显隐状态
CSS 配合实现基础视觉控制
仅靠 JS 切换 src 会显得生硬，加几行 CSS 就能稳住布局和基础动效：
- 给轮播容器设固定宽高，
overflow: hidden防止图片撑破 -
img标签加display: block; width: 100%; height: auto;，避免默认行内元素留白 - 如需淡入效果，不用 JS 操作
opacity，而是用 CSS 过渡：img { opacity: 0; transition: opacity 0.3s ease; }，再用 JS 切换 class 控制显隐 - 所有图片尺寸尽量统一，否则每次切换时容器会重排，造成抖动
容易被忽略的加载与容错细节
极简 ≠ 省略关键健壮性处理：
- 图片未加载完成时，
img.naturalWidth === 0，此时切换可能失败——可在changeImage中加if (img.naturalWidth)判断 - 用户快速连点“下一张”按钮，
setInterval不会自动清除，需在手动切换时调用clearInterval并重置计时器 - 页面失去焦点（如切到其他标签页）时，浏览器会节流
setInterval，导致恢复后连切多张——可用document.hidden监听并暂停/恢复逻辑 - 移动端 touch 事件未拦截时，手指滑动可能触发页面整体滚动，需在轮播容器上加
touch-action: pan-y
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
