1.前言

最近做店铺页面，需要一个卡片式轮播组件。网上很多都是类似于网易云的普通轮播组件，探索几番还是决定自己写一个组件出来。

设计出来的效果图：

垂直模式：

水平模式：

注：支持通过传入参数添加图片的class类名以及被选中的图片的class类名

2.编写思路

编写轮播组件要克服的难点是切换图片时的动画设计。以下是我的设计思路：

1.存在两个div元素，分别为.image-list和.virtual-list。.image-list包裹着.virtual-list。.virtual-list包裹着要轮播显示的图片.image，如下所示：

其中，.image-list元素的宽高如图的伪代码所示根据轮播图片的宽高以及margin尺寸动态生成。

2.要往左轮播一张图片时，先插入一张即将要出现的图片。下图以绿色方块代表插入的新图片，此时.virtual-list右侧溢出。

3.把.virtual-list往作移动一个图片的距离，此时.virtual-list左边溢出。但因.image-list的overflow设置为hidden。故.virtual-list的溢出部分不被显示。此时的.virtual-list在浏览器的渲染效果下看起来和没插入新图片一样。

4.上面步骤中动画结束后，在.virtual-list中删除最右边溢出的图片元素。到此一个轮播动作过程就完成了。

3.组件使用说明

代码我就不贴出来了，300行而已。想要调用直接到我的github网址下复制这个ImageCarousel.vue组件以及img文件夹(切换按钮用到的图标)既可 因为已封装成Vue组件，所以通过Vue引入使用。涉及到的参数和事件如下所示：

参数Attributes

参数	说明	类型	可选值	默认值	是否必须
images	要展示的图片	{Array<String>}	-	-	是
show-size	轮播图的数量	Number	-	3	否
image-class	为轮播图添加的类名	String	-	-	否
image-active-class	轮播图被选中时添加的类名	String	-	-	否
auto-slide	是否自动轮播	Boolean	-	false	否
auto-slide-interval	开启自动轮播时，切换图片的时间间隔	Number	-	3000	否
mode	选择展示的模式，有水平模式和垂直模式	String	horizontal/vertical	horizontal	否
slide-time	切换图片过程中动画的事件	Number	-	300	否

事件Events

事件类型	说明	回调参数
autoslide-image	开启自动轮播时，每切换图片都触发的事件	轮播到的图片的url
click-image	点击图片时触发的事件	被点击图片的url