轮播图

1. 结构组成

外层容器（视口：overflow:hidden，只显示一张图区域）

图片滑动容器（存放所有图片，横向排列）

图片项（每张轮播内容）

控制按钮：左/右切换箭头、底部小圆点指示器

自动播放定时器

2. 实现三大方案

3. CSS3 动画/transition 过渡轮播（简易，无复杂逻辑）

4. JS 控制位移（translateX / left）（最常用，兼容性好）

5. 第三方插件：Swiper（主流）、Bootstrap轮播

核心属性
index ：当前轮播下标（0、1、2…）

单张宽度 = 视口 offsetWidth

滑动距离 = -index * 单张宽度

通过 transform: translateX(距离) 实现平移

自动播放
setInterval() 定时自增 index，自动切换

clearInterval() 鼠标移入暂停，移出继续播放

无缝轮播关键逻辑
复制第一张放到末尾 / 最后一张放到开头

滑到边界瞬间取消过渡，瞬间跳转到对应位置，实现无限循环，无空白断层

指示器圆点联动
点击圆点直接赋值 index，切换对应图片

当前圆点添加 active 高亮类名

左右切换按钮
右箭头：index++，判断边界重置为0

左箭头：index--，判断边界重置为最后一张下标