众所周知，轮播图最为我大前端最最常见的组件之一，应该说每个前端工程师都要会写一遍吧。正好这两天在家休息，便在家写了这个组件。废话少说，本人的轮播图特点如下：

figure 1.正常滑动

figure 2.横屏效果

figure 3.PC端滑动

和许多人采用的一样，我的轮播图数据格式选择了首位各追加了一个，如： [0, 1, 2, 3] => [3, 0, 1, 2, 3, 0] ，这样做的好处就是默认展示第一张或者最后一张轮播图时候，滑动会更流畅

样式设置的思路如下：轮播图结构分为两个：轮播区域+指示器区，其中，轮播图区域的大小也就是整个轮播图的大小了，轮播图区域的样式如下，整体我是用scss写的（较简洁），其中ios-fix用来修复iOS设备滑动时候出现闪动问题的，原因是：transform 属性造成的3d转换时候造成的，轮播区域需要设置white-space为nowrap，这样就能让子swipe排在一列而不至于掉下去，最后我给每个siwpe项添加了包裹容器，目的有两个：一是方便控制相邻swipe项的间距，最重要的是：使用该组件不需要给组件传入整个滑动结构了，只需要传入单个swipe项目的结构样式就行了。

activeIndex变量表示当前轮播图的索引值，这个变量非常重要，因为我用它来计算上一张或者下一张轮播图X轴移动位置，也用它推导表示指示器索引值。

当前鼠标或手指触碰到屏幕时候，得立刻获取鼠标或者手指位置，这里我定义了一个startX变量，用来保存每次鼠标或手指触碰到屏幕时候的X轴位置。

做时时滑动，其实很简单，我们只需要时事动态的改变滑动位置就行了，计算好鼠标或手指划过的距离，然后改变轮播图的X轴的位移，不过要注意的是，需要对两边的临界值做好处理，总不能滑倒第一张了，你还能往下滑吧，代码如下