vue开发一个实用美观的轮播图组件

网上有不少vue开发的轮播图资源，相信读者也看过不少，这里笔者开发了一个轮播图组件，简单美观实用。
先上示例图：

常见的轮播图都是占满屏幕的形式，像上图所示的轮播图虽然经常见到，但是在一些常见的轮播组件中并没有这种形式，所以笔者专门针对这种形式的轮播图开发了一个组件。
该组件暂时由两种形式：正常模式normal，缩放模式zoom，缩放模式即为上图所示模式。

思路：
1.构思常见轮播图的实现。
2.先表现出轮播图的样式，然后通过父容器overflow:hidden隐藏掉多余的部分。
3.设置定时器，每间隔一段几秒钟将轮播图所属的容器横向移动一个图的距离。
4.设置手势控制，根据手势在屏幕上滑动的方向，动态移动轮播图。
5.修改样式，实现zoom形式。
6.整理优化。

手势方向判断通过touchstart,touchend事件来判断，在触摸开始记录下触摸点，触摸结束后根据结束点和开始点判断移动方向，借此来操作轮播图的移动方向。

下面看一下主要的js逻辑部分：

使用示例：

参数说明：

参数说明

参数	类型	说明
list	Array	轮播图数据列表
options	Object	轮播图配置项
height	String	控制显示轮播图的高度，默认3rem
effect	String	轮播图显示效果，两种类型：normal，zoom

options参数说明

参数	类型	说明
showDots	Boolean	控制是否显示分页器
autopaly	Boolean	控制是否自动播放
interval	Number	轮播间隔时间，默认3000

事件说明

名称	说明
onClick	在这个方法中可以拿到当前点击的轮播图的数据

详情代码可以直接到对应的github上复制：swiper组件。

提示：
笔者在开发的时候用的rem单位布局，根据750px的设计图，设置的1rem=100px，读者可以自行更改调整。

---

欢迎关注博主：小圣贤君，有问题可以留言哦~