display: none 切换会导致轮播容器高度抖动，因其移除元素引发重排；应改用 opacity + position: absolute + 固定容器高度（或首图撑开），确保所有图片层叠定位、仅透明度控制显隐，避免布局变化。
轮播图高度不固定时，用 display: none 切换图片必然导致父容器重排、页面跳动；真正可行的方案是放弃 display 控制，改用 opacity + position: absolute + 固定容器高度（或由首张图撑开）。
为什么 display: none 会导致高度抖动
当所有 <img> 默认 display: none，只有当前项设为 display: block 时，浏览器会重新计算该 <img> 的自然高度（尤其加载未完成时尺寸不定），进而触发父容器重排。用户滚动或切换瞬间，页面可能上蹿下跳。
常见错误现象包括：轮播区域突然收缩成一条线、下方内容向上猛顶、移动端反复触发回弹。
- 首张图加载慢，
height计算为 0，容器塌陷 - 图片宽高比不一致，每次切换容器高度都变
- 未设
font-size: 0或line-height: 0，<img>底部默认留白
用 opacity + absolute 实现真自适应高度
核心思路：所有图片层叠定位，仅靠透明度控制显隐，容器高度由第一张图撑开（或 JS 读取后设 inline height），后续图无需影响布局流。
关键 CSS 设置：
.carousel {
position: relative;
width: 100%;
/* 高度留给第一张图撑开，或 JS 注入 */
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.4s ease;
}
.carousel img.active {
opacity: 1;
position: relative; /* 确保 z-index 生效 */
}
- 必须给
<img>设height: auto，否则拉伸变形 - 避免用
max-width: 100%替代width: 100%，后者才能响应容器变化 - 如果首图加载延迟，可先用
aspect-ratio（现代浏览器）或 padding-bottom 占位
如何让轮播图在不同屏幕下保持比例一致
纯靠 width: 100% + height: auto 只能保宽比，不能控高比；要实现「大屏显示全图、小屏裁切居中」，得结合 object-fit 和媒体查询。
示例：
@media (min-width: 768px) {
.carousel img {
object-fit: cover;
height: 500px;
}
}
@media (max-width: 767px) {
.carousel img {
object-fit: contain;
height: 200px;
}
}
-
object-fit: cover适合背景图式展示，但需确保图片分辨率足够 -
object-fit: contain适合图标/LOGO类轮播，留白但不失真 - 不要在
<img>上同时写width和height属性（HTML 属性），会强制拉伸，覆盖 CSS
JS 切换时如何避免多次定时器叠加
自动轮播卡顿、连切两张、鼠标悬停后仍跳转，基本都是 setInterval 没清理干净。
正确做法：
let carouselTimer = null;
<p>function startAutoPlay() {
clearInterval(carouselTimer);
carouselTimer = setInterval(nextSlide, 4000);
}</p><p>// 所有触发切换的地方都要调用
element.addEventListener('click', () => {
clearInterval(carouselTimer);
nextSlide();
startAutoPlay();
});</p><p>carousel.addEventListener('mouseenter', () => clearInterval(carouselTimer));
carousel.addEventListener('mouseleave', startAutoPlay);
</p>
容易被忽略的是：图片加载完成事件（img.onload）也可能触发一次 startAutoPlay()，若没清旧 timer，就会叠加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
