扒一扒 Bootstrap 轮播图原理

[yshaojun]

之前写过轮播图，方法是将轮播图排成一行，父容器设置 overflow: hidden，每次左移一个轮播图宽度，结合 transition: 1s，实现轮播效果。为了处理最后一张和第一张的衔接，于是在末尾补充一张和第一张相同的轮播图，在末尾动画结束时禁用动画，替换成第一张，然后开启动画，进入下一轮轮播。

这种实现方式会多一张重复的轮播图，看起来不怎么优雅，恰好看到 Bootstrap 的轮播图组件，于是扒一扒它的原理。

截到一张变化中的 dom 图如下：

看了一会这些 class 的变化规律，很快猜到了实现原理：

• active: 当前轮播图；
• carousel-item-next: 下一张轮播图；
• carousel-item-left：轮播动画。

稳定的时候只显示 active，其他 display: none；变化的时候将 active 和 carousel-item-next 排成一行，然后左移。与我之前实现不同，我是把轮播图作为整体处理的，它则是只关注当前的和下一张。

Bootstrap 为了实现点击控制、淡入淡出等功能，js 写得较复杂，洋洋洒洒600多行代码，在具体场景中并不同时需要这么多功能，于是按这个思路实现了个 demo。

carousel-demo

值得一提的是，为了使轮播图处于同一行，Bootstrap 使用了 float + 负 margin，通过 margin: -100%，把挤到下面的轮播图“拉”了上来。

但是我并没有完全还原 Bootstrap 轮播图效果，Bootstrap 是“滑动”，我的则是“翻页”，看了很久没明白是怎么做到当前页和下一页不重叠，下次有时间继续扒。