最稳妥的轮播实现是用 display: none/block 切换图片，html结构需为 .carousel 直接包裹平级 标签，js 通过 document.queryselectorall('.carousel img') 获取并统一控制显隐，配合定时器清理与容器定高防跳动。
直接用 display: none 切换图片最稳妥，别碰 transform 或 opacity 动画——新手卡住八成是因为过早卷进过渡逻辑，而没先让“只显示一张图”这件事跑通。
HTML结构必须用 .carousel 包裹独立 <img>
所有图片必须是平级的 <img> 标签，不能塞进 <ul></ul>、<figure></figure> 或嵌套容器里（除非你明确需要语义化或链接）。浏览器不认“轮播”这个概念，JS 只能靠 class 或标签名批量选中元素。
-
<div class="carousel"> <img src="1.jpg"><img src="2.jpg"> </div>✅ 简单直接，JS 用document.querySelectorAll('.carousel img')一把抓 -
<div class="carousel"> <div><img src="1.jpg"></div> <div><img src="2.jpg"></div> </div>❌ 多一层 div，选图要写.carousel div img，容易漏掉或误选 - 别给
<img>加loading="lazy"或<picture></picture>—— 图片加载顺序和尺寸不稳定，会导致 JS 读clientWidth出错
JS 控制显隐：先清空再设当前，顺序不能反
切换核心就两步：把所有图设为 display: none，再把目标图设为 display: block。用 visibility: hidden 或 opacity: 0 会留占位、挡点击、动画难同步，纯属给自己加戏。
- 初始状态统一加
style="display: none;"到每张<img>，第一张额外加style="max-width:90%" - 切换函数里必须先遍历全部
<img>执行img.style.display = 'none'，再设目标项slides[index].style.display = 'block' - 如果轮播容器高度不固定，
display切换会触发重排（页面跳动），此时必须给.carousel设死高度，比如height: 400px
自动轮播必须配 clearInterval 和暂停逻辑
只写 setInterval(nextSlide, 3000) 是定时炸弹：鼠标悬停还在切、点按钮后两张图连播、切到最后一张突然跳回第一张……崩点全在定时器失控。
- 定义全局变量
let carouselTimer = null，每次启动前先clearInterval(carouselTimer) - 给
.carousel绑mouseenter（暂停）和mouseleave（重启），移动端可跳过 - 每次手动点击按钮后，立刻调用
clearInterval(carouselTimer)再carouselTimer = setInterval(...)，重置计时器 - 别用
setTimeout递归模拟自动播放——容易堆栈溢出，且无法统一清理
真正卡新手的不是“怎么动”，而是“动之前怎么稳住状态”。索引越界、定时器残留、DOM 未加载完就执行 JS、图片宽高没固定导致 layout shift——这些比动画曲线难调十倍。先让三张图稳稳地切，再考虑加 transition 或循环逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
