用 display 切换图片显隐最简单直接：只让当前图 display: block，其余为 none；避免 visibility: hidden 留白、opacity: 0 占空间；推荐 classList 切换预设类，配合 clearTimeout 链式定时器防卡顿。
用 display 切换图片显隐最简单
直接控制每个 <img alt="html如何在div中一张张地显示图片" > 的 display 值，只让当前那张是 block，其余全设为 none。不用 JS 也能靠 CSS @keyframes 轮播，但真要交互（比如点按钮切图），JS 操作 display 是最稳、兼容性最好、也最容易 debug 的方式。
常见错误是把所有图片都设成 inline 或 inline-block 然后靠 visibility: hidden 切换——这样会留白、影响布局，而且屏幕阅读器仍可能读出隐藏图；display: none 才真正脱离文档流。
- 确保容器
<div> 有明确宽高，否则 <code>display: none切换时可能引起页面抖动 - 图片尺寸不一致时，建议统一设
width/height或用object-fit控制缩放 - 别用
opacity: 0代替display: none：它占空间、能被聚焦、动画卡顿更明显
querySelectorAll + forEach 控制多张图
拿到所有图片元素后，遍历并按索引控制显隐，是最常见的 JS 实现逻辑。关键不是“怎么选”，而是“怎么记当前显示哪张”——用一个变量存当前下标，每次切换就更新它，再重置所有图的 display。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const imgs = document.querySelectorAll('#carousel img');
let currentIndex = 0;
function showImage(index) {
imgs.forEach((img, i) => {
img.style.display = i === index ? 'block' : 'none';
});
}
注意：querySelectorAll 返回的是静态 NodeList，不能用 map 或直接解构赋值；如果图是动态插入的，得在插入后重新查一遍或用事件委托。
- 索引越界（比如
currentIndex = -1或超长）必须手动校验，否则静默失败 - 避免在循环里反复调用
document.querySelectorAll，性能差且易错 - 如果图带
loading="lazy"，display: none可能阻止加载，首次显示会闪一下
用 classList 替代内联样式更可控
直接改 style.display 很快，但一旦要加过渡动画、响应式适配、或和其它样式（比如暗色模式）联动，就容易打架。用 classList.add/remove 切换预设 class 更干净。
对应 CSS 可写：
.slide { display: none; }
.slide.active { display: block; }
JS 侧只需操作 class：
imgs.forEach((img, i) => {
img.classList.toggle('active', i === currentIndex);
});
- 别漏掉清除旧的
active，否则多张图同时显示 - 如果用
transition: opacity .3s，记得配合pointer-events: none防止点击穿透到下层图 - IE10+ 支持
classList，如需兼容更低版本，可用className字符串拼接，但易出错
轮播自动播放时，setInterval 容易卡住
用 setInterval 定时切图很常见，但用户手动切图后没清理定时器，或图片加载慢导致多次回调堆积，就会跳图、卡死甚至内存泄漏。
更稳妥的做法是用 setTimeout 链式调用，每次只设下一个定时器，并在用户交互时清除它：
let timer;
function startAuto() {
timer = setTimeout(() => {
currentIndex = (currentIndex + 1) % imgs.length;
showImage(currentIndex);
startAuto(); // 递归启动下一轮
}, 3000);
}
function stopAuto() {
clearTimeout(timer);
}
- 鼠标悬停容器时应调用
stopAuto()，移出再重启，否则用户看图时还在切 - 图片加载失败（
onerror）时也要清定时器，避免无限重试 - 不要在
showImage里直接clearTimeout再setTimeout—— 这样会打断当前动画节奏
轮播看似简单，但图片加载时机、用户中断行为、焦点管理这三块最容易被忽略，一不留神就变成半成品。
