用 setInterval 实现图片轮播需维护索引、防越界、确保加载完成再切换；CSS 动画仅适合静态固定图；注意 onload 重复绑定、404 处理、DOM 缓存及 visibilitychange 控制后台运行。
用 setInterval 控制 <img alt="HTML如何实现网页中图片自动循环播放的幻灯片" > 的 src 切换最直接
不需要框架也能做，核心就是定时替换图片的 src 属性。关键不是“播放”，而是“按序轮换”——浏览器本身不提供原生幻灯片组件，得自己维护索引和边界逻辑。
常见错误是忘记重置索引导致越界，或在图片未加载完成时就切换，造成闪白或 404 占位。
- 把图片路径存进数组，比如
const imgs = ["1.jpg", "2.jpg", "3.jpg"] - 用一个变量（如
let idx = 0）记录当前显示哪张 - 每次
setInterval触发时：更新idx、赋值给imgEl.src、可选地加个imgEl.onload防止加载失败卡住 - 注意：如果用
idx = (idx + 1) % imgs.length，能自动循环，但得确保数组非空，否则% 0会出错
用 CSS @keyframes 做纯样式轮播只适用于固定数量且尺寸一致的图
这种方式本质是把多张图叠在一起，靠 opacity 和 z-index 控制显隐，用动画帧驱动切换。它不改 src，所以不能动态加载新图，也不响应 JS 数据变化。
适合静态宣传页，但一旦图片数量变、宽高不一，CSS 动画时间点就很难对齐，容易出现两张图同时半透明或空白间隙。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须提前写死每张图的
opacity: 1时间段，例如 0%→25% 显示第一张，25%→50% 显示第二张…… - 要用
animation-iteration-count: infinite实现循环 - 所有
<img alt="HTML如何实现网页中图片自动循环播放的幻灯片" >必须设为position: absolute且父容器position: relative，否则层叠错乱 - 不推荐用于用户上传图或响应式布局，因为动画时长和关键帧比例无法随图片数量自动调整
遇到 img.onload 不触发或触发多次？检查是否重复赋值 src
这是实际开发中最常踩的坑：给同一个 <img alt="HTML如何实现网页中图片自动循环播放的幻灯片" > 元素反复设置 src，会清空之前的加载监听，导致 onload 丢失；或者网络慢时，上一张还没加载完就切下一张，onload 被覆盖。
- 每次切换前，先清除旧的
onload：删掉imgEl.onload = handler这行，再重新赋值 - 更稳妥的做法是用
addEventListener("load", handler, { once: true })，{ once: true }确保只执行一次且自动解绑 - 如果某张图加载失败（如 404），
onerror会触发，建议在这里跳过这张、递增索引，避免卡死 - 不要在
setInterval回调里直接操作 DOM（如document.getElementById），应提前缓存元素引用，减少查找开销
移动端滑动+自动播放混合时，visibilitychange 事件必须监听
用户切到其他标签页或锁屏后，setInterval 仍可能运行，导致后台疯狂请求图片、耗电、甚至触发接口限流。浏览器在页面不可见时通常会降频定时器，但不保证停止。
- 监听
document.addEventListener("visibilitychange", () => {...})，当document.hidden === true时clearInterval，恢复可见时再重启 - 别只依赖
pagehide或blur，它们触发时机不一致，visibilitychange是最可靠判断页面是否真正“不可见”的方式 - 如果支持手势滑动，记得在滑动开始时暂停自动播放，松手后延时几秒再恢复，否则用户拖拽时图片突然跳走体验极差
