轮播图需先构建正确html结构：外层容器.carousel设overflow:hidden，内部.carousel-track用flex布局并设transform过渡，图片默认display:none。js控制须防索引越界和定时器冲突，移动端加will-change:transform防闪烁。
别急着写 JS，先让三块 HTML 结构站对位置——否则再漂亮的动画也动不起来。
轮播图的 HTML 结构必须用 div 包裹图片，不能只放 img
常见错误是直接写一堆 <img src="a.jpg"><img src="b.jpg">，这样 JS 没法统一控制显隐，CSS 也难做过渡。正确结构要有一个容器、一个可视区、一组图片项：
<div class="carousel"> 是外层容器，负责定位和溢出隐藏（<code>overflow: hidden）<div class="carousel-track"> 是滑动轨道，宽度 = 单张图宽 × 图片数，靠 <code>transform: translateX()移动- 每张
<img>默认是块级元素，避免行内间隙影响布局 -
.carousel-track { display: flex; transition: transform 0.4s ease-in-out; }—— 必须加display: flex让图片水平排列，否则宽度计算不准 -
ease-in-out比linear更自然，但别用cubic-bezier(0.1, 0.7, 0.1, 1)这类复杂值——新手调不准 - 移动端记得加
will-change: transform防止偶发闪烁（仅在需要时加） - 定义
let currentIndex = 0;和const slides = document.querySelectorAll('.carousel-track img'); -
goToSlide(index)开头必须判断：if (index = slides.length) return; - 自动播放用
setInterval，但每次调用前先clearInterval(intervalId)，避免多个定时器并发 - 给
.carousel加mouseenter/mouseleave监听，暂停/恢复定时器（注意：移动端没有 hover，可跳过） - 所有
<img>默认加style="max-width:90%" - 用 JS 找到当前要显示的那张图，设为
style="display: block;"（不是 inline，<img>是替换元素） - 切换前先遍历所有
<img>清掉display: block，再设新的——顺序不能反
CSS 动画必须用 transform + transition，别碰 left 或 margin
用 left 移动会触发重排（reflow），卡顿明显；margin 无法精准控制小数位偏移。只有 transform: translateX() 是 GPU 加速的，且支持平滑过渡：
JS 控制逻辑只要 3 个核心函数：goToSlide()、nextSlide()、startAutoPlay()
轮播图最常崩的地方是「索引越界」和「自动播放与手动切换冲突」。下面是最简健壮写法：
新手最容易忽略的细节：图片默认要设 display: none，而不是靠 opacity: 0 或 visibility: hidden
visibility: hidden 仍占布局空间，可能撑开容器高度；opacity: 0 在过渡中容易叠加显示。最直白可靠的方式是：
