记一次手动实现前端轮子--swiper

## 前言 今天下午，产品妹子过来说现在项目首页banner的切换效果她不是很喜欢，让处理成轻交互的模式，即淡入淡出切换。从内心深处是不想接这个需求的，一是，从自己是用户的角度来说，不管是左右切换还是淡入淡出切换，并不影响我的体验。二是，从技术层面考虑，项目中用的是element自带的carousel组件，而它并没有带这种切换效果。也就是说这个小需求，或者说这个小改动，不是配置一两个参数就能搞定的。这下事情就没那么简单了，虽然这种插件太多了，完全可以引入一个第三方库是能很快处理掉这个问题。不过因为第三方库，相对功能全一点的，插件的体积都比较大，引入后对项目体积的增加是肉眼可见的。从性能层面看，为了一个小的改动，就直接引入一个第三方库不值得，没办法自能自己造个轮子了。 ## 产品需求 1. 数据可扩展，可配置区分带连接项和不带连接的项 2. 4秒钟自动淡入淡出切换banner 3. 鼠标悬停交互，左右点击按钮交互，中间分页点悬停交互 ## 代码实现 ### 模板代码 ```html

标签：插件,淡入淡出,--,##,切换,轮子,交互,第三方,swiper
来源： https://blog.51cto.com/oliverly/2966382