轮播图核心是切换、自动播放控制与用户交互反馈，需HTML+CSS+JS协同实现；关键在用transform或opacity/visibility平滑切换、正确处理索引边界、清除定时器及事件冲突、移动端适配touch事件。
轮播图不是靠写一堆 <div> 堆出来的，核心是「切换」+「自动播放控制」+「用户交互反馈」。纯 HTML 不足以实现轮播，必须配合 CSS 动画/过渡 和 JavaScript 逻辑。
用 HTML + CSS + JS 实现最简可用轮播（无框架）
主流做法是用一个容器包裹所有图片，通过修改 transform: translateX() 或切换 opacity + visibility 来显示当前项。关键不是“怎么放图”，而是“怎么让图动起来且不卡”。
- 每张图用
<img>或背景图方式放入<div class="slide">，统一放在<div class="carousel-inner">内 - 用一个
currentIndex变量记录当前索引，每次点击按钮或自动播放时更新它 - CSS 中为
.carousel-inner设置overflow: hidden，并给子项设置position: absolute或使用 Flex +transform平移 - 避免直接操作
display: none切换——会导致重排，优先用opacity: 0+visibility: hidden
<div class="carousel">
<div class="carousel-inner">
<div class="slide active"><img src="1.jpg" alt="1"></div>
<div class="slide"><img src="2.jpg" alt="2"></div>
<div class="slide"><img src="3.jpg" alt="3"></div>
</div>
<button class="prev"><</button>
<button class="next">></button>
</div>
setInterval 自动轮播容易出什么问题？
直接用 setInterval(switchSlide, 3000) 是入门写法，但实际会遇到：用户刚点下“下一张”，定时器又触发一次，造成跳两页；或者鼠标悬停时还在切，体验割裂。
- 必须在用户交互（点击、hover）时
clearInterval清除旧定时器 - 重新开始计时前，先调用一次
switchSlide()，避免悬停后恢复时延迟一整周期 - 不要把定时器 ID 存在全局变量里，封装进轮播实例对象的属性中（如
this.timerId） - 如果页面被切换到后台标签页，
setInterval可能被节流甚至暂停，导致恢复时连切多张——可改用requestAnimationFrame配合时间戳判断是否超时
为什么轮播图点击“上一张”经常失效或错位？
多数人只写了 currentIndex++，却没处理边界：到最后一张再点“下一张”，应该回到第一张；到第一张再点“上一张”，应该跳到最后。漏掉取模或条件判断，就会索引越界，slides[currentIndex] 变成 undefined。
立即学习“前端免费学习笔记（深入）”；
- “下一张”逻辑：
currentIndex = (currentIndex + 1) % slides.length - “上一张”逻辑：
currentIndex = (currentIndex - 1 + slides.length) % slides.length（注意不能直接用(currentIndex - 1) % slides.length，负数取模在 JS 里结果是负的） - 切换前务必检查
slides[currentIndex]是否存在，尤其 DOM 节点可能因动态插入/删除未就绪 - 如果用了 CSS transition，确保每次切换前清除上一次的
transition类，否则可能叠加动画效果导致错乱
移动端滑动轮播要特别注意什么？
PC 上靠 click 就行，手机需要监听 touchstart/touchmove/touchend，自己算滑动距离和方向。别直接套用鼠标事件。
- 记录
touchstart的touches[0].clientX，在touchend时再取一次，差值绝对值大于 50px 才判定为有效滑动 - 过程中要
e.preventDefault()阻止默认滚动，否则手指一划页面跟着滚了 - 别忘了在
touchmove里实时更新元素位置（用transform: translateX()），实现“拖拽跟随”效果 - 滑动结束时，如果偏移量超过阈值（比如 30% 宽度），就执行切换；否则回弹 —— 这个逻辑必须手写，CSS 无法自动判断
真正难的不是让图动起来，而是让动的过程可控、可中断、不打架。很多看似“轮播没反应”的问题，其实是多个定时器、事件监听器、CSS 类同时作用导致的状态冲突。先确保单次切换逻辑 100% 正确，再加自动、循环、响应式、手势，一层一层来。
