最稳多图轮播需手写HTML+CSS+JS：用loading="lazy"防卡顿，setInterval+clearInterval防定时器叠加，img必设width/height防抖动，边界判断替代取模，鼠标悬停暂停并恢复，兼顾加载失败和可访问性。
用 HTML + CSS + JavaScript 实现多图轮播，不依赖框架最稳
纯手写轮播最可控，尤其适合批量图场景——比如产品图集、相册页、后台生成的静态展示页。关键不是“炫效果”，而是“图一多就卡”“换图错位”“自动播放停不下来”这些实际问题得提前防住。
img 标签批量加载时必须加 loading="lazy"
几十张图直接塞进 DOM，页面会卡顿甚至崩溃。浏览器原生懒加载能显著缓解：
- 只在视口附近才加载图片，首屏秒开
- 配合轮播容器（如
<div class="carousel">）使用更安全 - 旧版 Safari 不支持，但可降级为 JS 控制
src赋值，不用额外 polyfill
<div class="carousel"> <img src="1.jpg" loading="lazy" alt="图1"> <img src="2.jpg" loading="lazy" alt="图2"> <img src="3.jpg" loading="lazy" alt="图3"> </div>
轮播逻辑用 setInterval + index 管理，别用 setTimeout 递归
批量图轮播最怕“定时器叠加”：用户快速点上一页/下一页，setTimeout 没清除干净，多个定时器同时跑，图片乱跳、内存泄漏。
- 统一用
let timer = setInterval(...)启动 - 每次切换前先
clearInterval(timer)，再重设 - 暂停轮播（如鼠标悬停）也必须清 timer，否则移出后继续执行
- 最后一张图切到第一张时，别用
index++ % length硬算，先判断边界再赋值，避免浮点或 NaN
let index = 0;
let timer = setInterval(nextSlide, 3000);
function nextSlide() {
clearInterval(timer);
index = (index + 1) % images.length;
updateSlide();
timer = setInterval(nextSlide, 3000);
}
carousel.addEventListener('mouseenter', () => clearInterval(timer));
carousel.addEventListener('mouseleave', () => timer = setInterval(nextSlide, 3000));
批量图轮播必须加 width 和 height 属性防布局抖动
没设宽高的 img 加载中是 0×0，加载完突然撑开，整个页面“跳动”。批量图尤其明显——几十张图逐个加载，轮播区高度反复变。
立即学习“前端免费学习笔记（深入）”；
- 所有
<img>必须带width和height（像素值，非百分比） - 如果图尺寸不统一，按最大宽高设，再用
object-fit: cover裁剪 - 服务端生成 HTML 时，最好从 EXIF 或文件头读取真实尺寸自动注入，别手动填
<img src="1.jpg" width="800" height="600" loading="lazy" style="object-fit: cover;">轮播本身不难，难的是图一多，各种边界情况就冒出来：图加载失败没 fallback、键盘导航没支持、屏幕阅读器读不出当前图序号……批量图场景下，稳定压倒一切。
