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

事件Events