张少轶轮播图这个玩意儿，说简单是真简单，一个setInterval加上几张图就能跑起来；说复杂也是真复杂，无缝循环、触摸滑动、自动播放、懒加载、跳转埋点，每一环拆开都能写一篇文章。尤其是热搜里那个“京东从轮播图点进去跳转到其他页面是怎么实现的”，看着是点一下跳走，背后其实藏着一整套数据设计、路由管理和业务对接的链路。我做了这么多年前端，轮播图从jQuery时代一路写到Vue3，踩过的坑比写过的功能还多，这篇就把轮播图从选型、实现到跳转、埋点、避坑的完整经验一次说清楚。
无论你是刚入行的前端新人，还是已经在业务里被轮播图折磨过几轮的开发者，这篇都能给你一些可以直接抄走的思路。我会把方案选型、核心原理、实操代码、问题排查分成四个部分来讲，每一段都是实际项目中验证过的，不是教科书里那种跑不通的伪代码。
1. 轮播图方案选型：先想清楚再动手
很多人拿到轮播图需求，第一反应是去npm搜一个轮播图组件装上，这本身没错。但轮播图的水深浅取决于你的业务复杂程度，如果只是静态展示三张广告图，确实不需要折腾；如果涉及到跳转、埋点、动态数据、多端适配，那就得认真权衡一下方案了。
1.1 不同场景下轮播图组件的选型思路
选轮播图方案，我一般按项目情况分三条路走。
第一条路，非核心业务、快速上线，直接用Swiper这类成熟库。Swiper最大的价值不是它功能多，而是它把触摸、惯性滑动、循环播放这些底层逻辑都处理好了，浏览器兼容性也替你踩过坑了，你只需要传配置项就行。它适合活动页、官网、后台系统的 Banner 展示，这种场景下业务逻辑简单，不太需要深度定制。
第二条路，业务较重、需要深度定制，但不想完全从零写，那就在成熟库基础上做二次封装。比如你需要在轮播图里嵌入视频播放、需要特殊的手势交互、需要和业务组件共享状态，这时候你可以在 Swiper 的 API 之上包一层自己的组件，把业务相关的逻辑隔离在封装层里。我做过一个医疗项目的首页 Banner，需要在轮播图内嵌在线问诊的入口卡片，就是用这种方式，既保留 Swiper 的稳定性，又让业务代码足够干净。
第三条路，完全自研。这听起来工作量最大，但在某些场景下反而是最优解。我经历过一个纯展示型项目，全部轮播图就三类固定样式，用 Swiper 要额外引入几十 KB 的样式和脚本，而且 UI 和交互跟 Swiper 默认行为差别较大，定制成本居然比从零写还高。这种时候我果断选择自研，代码量极小，性能最好，维护成本也最低。
选型的核心逻辑是：复杂度越高，越要选可控性强的方案；复杂度越低，越要选开发效率高的方案。 不要在简单场景里堆重组件，也不要在复杂场景里硬套轻方案。
1.2 自研轮播图的前期准备与核心设计
如果你决定自研，动手前一定要把设计模式想清楚。我见过太多同事一上来就写setInterval翻图片，写到最后发现既不能触摸滑动，又不能动态增删数据，整个组件是一坨面条代码，改一个需求崩三个功能。
我自研轮播图的习惯是分三层来设计：
- 数据层：轮播图数据（图片地址、跳转链接、埋点参数）由外部传入，组件内部不直接改动数据源。
- 状态层：维护当前索引、是否处于动画中、是否自动播放等状态，状态变化驱动视图更新。
- 视图层：只负责渲染，根据状态层的数据展示当前帧的 UI。
数据层和状态层分离的好处是，后续如果要从接口拉取轮播图数据、或者在轮播图内嵌入业务组件，代码结构不会乱。我通常会在 Vue 里用 watch 监听数据源变化，一旦外部传入的轮播图列表更新，就自动重置当前索引并重新计算所有状态字段，这个操作就放在数据层和状态层的交界处。
自研组件还有一个容易忽略的设计点：轮播图的宽度不一定是视口宽度。 有些业务场景轮播图只占页面中部一块区域，这时候计算位移的基准就不能写死成 window.innerWidth，