轮播图核心是切换、自动播放控制与用户交互反馈，需HTML+CSS+JS协同实现；关键在用transform或opacity/visibility平滑切换、正确处理索引边界、清除定时器及事件冲突、移动端适配touch事件。
轮播图不是靠写一堆 主流做法是用一个容器包裹所有图片，通过修改 直接用 多数人只写了 立即学习“前端免费学习笔记（深入）”； bootstrap-carousel-touch-slider是一款基于Bootstrap支持移动端的响应式轮播图效果。该轮播图特效可以使用手指进行滑动切换。并且它和animate.css结合，可以制作出各种炫酷的文字动画效果。
使用方法
在页面中引入bootstrap相关文件，font-awesome.css字体图标文件，animate.min.css动画文件，以及jquery.touchS PC 上靠 click 就行，手机需要监听 真正难的不是让图动起来，而是让动的过程可控、可中断、不打架。很多看似“轮播没反应”的问题，其实是多个定时器、事件监听器、CSS 类同时作用导致的状态冲突。先确保单次切换逻辑 100% 正确，再加自动、循环、响应式、手势，一层一层来。用
HTML + CSS + JS 实现最简可用轮播（无框架）transform: translateX() 或切换 opacity + visibility 来显示当前项。关键不是“怎么放图”，而是“怎么让图动起来且不卡”。currentIndex 变量记录当前索引，每次点击按钮或自动播放时更新它.carousel-inner 设置 overflow: hidden，并给子项设置 position: absolute 或使用 Flex + transform 平移display: none 切换——会导致重排，优先用 opacity: 0 + visibility: hidden
setInterval 自动轮播容易出什么问题？setInterval(switchSlide, 3000) 是入门写法，但实际会遇到：用户刚点下“下一张”，定时器又触发一次，造成跳两页；或者鼠标悬停时还在切，体验割裂。
clearInterval 清除旧定时器switchSlide()，避免悬停后恢复时延迟一整周期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 节点可能因动态插入/删除未就绪transition 类，否则可能叠加动画效果导致错乱移动端滑动轮播要特别注意什么？
touchstart/touchmove/touchend，自己算滑动距离和方向。别直接套用鼠标事件。
touchstart 的 touches[0].clientX，在 touchend 时再取一次，差值绝对值大于 50px 才判定为有效滑动e.preventDefault() 阻止默认滚动，否则手指一划页面跟着滚了touchmove 里实时更新元素位置（用 transform: translateX()），实现“拖拽跟随”效果
