零基础做轮播图第一件事是搭好HTML结构：外层容器（class="carousel"）、图片组（class="carousel-images"，每张img带宽高和alt）、导航按钮；用display:none/block控制显隐，配合定时器清理（clearInterval+resetTimer）确保稳定切换。
零基础做轮播图，第一件事不是写 JavaScript，而是把三块东西摆对位置：一个外层容器、一组并排图片、一组导航按钮。结构没搭稳，后面所有 JS 和 CSS 都会卡在“图片不动”“点按钮没反应”“切换时重叠或闪动”上。
HTML 结构必须用 div 包裹 img，不能只堆 img 标签
常见错误是直接写：<img src="1.jpg"><img src="2.jpg"><img src="3.jpg">。这样 JS 没法统一选中、CSS 也难控制布局，更别说加过渡了。
- 外层必须用
<div class="carousel">，这是后续加样式和 JS 查询的锚点 - 图片统一放进
<div class="carousel-images">，每张用独立<img>，带alt和固定宽高（如width="600" height="400"） - 别用
<ul><li>或<picture>开头就套语义化或响应式——先让三张图能切出来再说 - 初始状态全部设
style="display: none;"，只给第一张加style="display: block;"
display: none 切换比 transform 更适合零基础起步
新手容易一上来就想用 transform: translateX() 做滑动动画，结果卡在计算偏移量、容器宽度、flex 排列上。其实“只显示一张”这个逻辑，比“怎么滑过去”重要十倍。
- 用
display: none/display: block是最直白、最不容易出错的显隐控制方式 - 千万别用
visibility: hidden替代——它仍占布局空间，可能撑开容器高度，导致页面跳动 - 切换前必须先遍历所有
img，统一设回display: none；再设目标索引那张为display: block，顺序不能反 - 如果轮播容器高度不固定，
display切换会触发重排；此时需给.carousel设死高度，例如height: 400px
setInterval 必须配 clearInterval，否则自动播放会失控
只写 setInterval(next, 3000) 是危险操作。用户点按钮后定时器还在跑，鼠标悬停时还在切图，极易造成图片乱跳、索引错位。
立即学习“前端免费学习笔记（深入）”；
- 定义全局变量
let carouselTimer = null - 每次启动前先
clearInterval(carouselTimer)，再重新setInterval - 给
.carousel绑定mouseenter和mouseleave：悬停时clearInterval，移开时重设 - 手动点击导航按钮后，也要调用重置定时器的函数（比如
resetTimer()），否则刚切到第 2 张，0.5 秒后又跳到第 3 张 - 左右箭头必须用
<button type="button">，不是<a>或普通<div>，避免默认跳转或焦点干扰
真正卡住初学者的，从来不是“怎么写动画”，而是“为什么这张图没消失”“为什么点了按钮没反应”“为什么鼠标一放上去就疯狂切图”。把容器、图片、按钮这三块物理位置和 DOM 关系理清，再补上 display 控制和定时器清理这两个关键动作，轮播图骨架就立住了——之后加过渡、加箭头、加指示点，都是顺手的事。
