零基础做HTML轮播图需遵循「结构—样式—行为」三层配合：结构用.carousel包裹.carousel-track及图片项；样式用flex+transform+transition实现平滑动画；行为由goToSlide、nextSlide、startAutoPlay三个函数控制索引与自动播放。
零基础做 HTML 轮播图，不用框架也能跑起来，关键是先搞懂「结构—样式—行为」三层怎么配合，而不是一上来就抄 JS 代码。
轮播图的 HTML 结构必须用 <div> 包裹图片，不能只放 <img>
常见错误是直接写一堆 <img src="a.jpg"><img src="b.jpg">，这样 JS 没法统一控制显隐，CSS 也难做过渡。正确结构要有一个容器、一个可视区、一组图片项：
<div class="carousel">
<div class="carousel-track">
<img src="1.jpg" alt="slide 1">
<img src="2.jpg" alt="slide 2">
<img src="3.jpg" alt="slide 3">
</div>
</div>-
carousel是外层容器，负责定位和溢出隐藏（overflow: hidden） -
carousel-track是滑动轨道，宽度 = 单张图宽 × 图片数，靠transform: translateX()移动 - 每张
<img>默认是块级元素，避免行内间隙影响布局
CSS 动画靠 transition 配合 transform，别用 left 或 margin
用 left 移动会触发重排（reflow），卡顿明显；margin 无法精准控制小数位偏移。只有 transform: translateX() 是 GPU 加速的，且支持平滑过渡：
.carousel-track {
display: flex;
transition: transform 0.4s ease-in-out;
}- 必须加
display: flex让图片水平排列，否则width计算不准 -
ease-in-out比linear更自然，但别用cubic-bezier(0.1, 0.7, 0.1, 1)这类复杂值——新手调不准 - 移动端记得加
will-change: transform防止偶发闪烁（仅在需要时加）
JS 控制逻辑只要 3 个核心函数：goToSlide()、nextSlide()、startAutoPlay()
轮播图最常崩的地方是「索引越界」和「自动播放与手动切换冲突」。下面是最简健壮写法：
立即学习“前端免费学习笔记（深入）”；
let currentIndex = 0;
const slides = document.querySelectorAll('.carousel-track img');
const track = document.querySelector('.carousel-track');
<p>function goToSlide(index) {
if (index < 0 || index >= slides.length) return;
currentIndex = index;
const offset = -currentIndex * slides[0].clientWidth;
track.style.transform = <code>translateX(${offset}px)</code>;
}</p><p>function nextSlide() {
goToSlide((currentIndex + 1) % slides.length);
}</p><p>function startAutoPlay() {
setInterval(nextSlide, 3000);
}-
goToSlide()做边界检查，防止currentIndex变成 -1 或 5（当只有 3 张图时） -
nextSlide()用取模%实现循环，比写 if-else 更简洁 - 自动播放用
setInterval就够，别上requestAnimationFrame——它不解决轮播本质问题，反而增加理解成本
真正卡住新手的，从来不是“怎么让图动起来”，而是“动完之后点按钮没反应”或者“切到第三张再点上一张就白屏”。这些几乎全是索引没重置、clientWidth 拿错元素、或 CSS overflow 漏设导致的。把结构定死、CSS 动画限定在 transform、JS 只操作索引——三者守住，轮播图就稳了。
