HTML5无内置图片循环切换功能，需JavaScript配合setInterval与DOM操作实现；纯CSS方案存在白屏、不可控等缺陷；轮播组件需注意悬停暂停、后台标签页节流及图片尺寸统一。
HTML5 本身没有内置的「图片循环切换」功能，必须靠 JavaScript 驱动定时器 + DOM 操作来实现自动轮播；纯 HTML/CSS 无法做到真正自动、可控制的循环切换。
用 setInterval + img.src 切换最直接
这是最轻量、兼容性最好、也最容易调试的方式。适合只有几张图、不需过渡动画的场景。
- 把图片路径存进数组，用一个索引
currentIndex记录当前显示哪张 - 每次
setInterval触发时更新img.src，并递增索引（到末尾就归零） - 注意：图片未加载完成就切换会导致空白闪动，建议加
img.onload或用loading="lazy"配合预加载逻辑
const images = ["slide1.jpg", "slide2.jpg", "slide3.jpg"];
const imgElement = document.getElementById("banner");
let currentIndex = 0;
function changeImage() {
imgElement.src = images[currentIndex];
currentIndex = (currentIndex + 1) % images.length;
}
// 每 3 秒切一张
setInterval(changeImage, 3000);
CSS @keyframes + background-image 轮播有硬伤
有人尝试用 CSS 动画切换 background-image 实现“自动”，但实际不可控、难维护，且存在明显缺陷：
-
background-image无法监听加载状态，切换瞬间易白屏 - 动画时间轴固定，无法暂停/跳转/响应用户交互
- 无法获取当前显示的是第几张图（无 JS 参与就等于无状态）
- IE 和旧版 Safari 对多背景图动画支持差，
animation-timing-function在背景切换中也不生效
用 HTMLMediaElement 播放图片序列？不推荐
虽然 标签理论上能通过 src 指向 GIF / WebP 动画，或用 MSE 加载帧序列，但：
立即学习“前端免费学习笔记（深入）”；
- GIF 体积大、不支持懒加载、无法单独控制某帧
- WebP 动画浏览器支持不一（Safari 直到 iOS 17 才完全支持）
- MSE 处理图片序列属于过度设计，JS 解码+canvas 渲染延迟高、功耗大
- 所有这些方式都绕不开「首帧等待」和「循环精度丢失」问题（视频播放器有自己的时序逻辑）
轮播组件里最容易被忽略的三个点
哪怕你用 Swiper、Splide 这类成熟库，以下三点仍常出问题：
- 用户鼠标悬停时没暂停
autoplay—— 导致「想看清楚某张图却被强行切走」 - 页面切换到后台标签页后，
setInterval仍运行，唤醒时集中触发多次切换（可用document.hidden+visibilitychange事件控制） - 图片尺寸不一致时，容器高度频繁重排，引发布局抖动 —— 必须给
img设固定宽高或用aspect-ratio约束
