工具 - 我又手写轮播了

前言

作为一个前端，写轮播(又叫跑马灯)是无法避开的一个需求点。

而随着各种框架以及UI库的出现，已经很少有人会自己去写轮播了。

最近刚好想脱离于VUE/REACT框架轮播图，手写一个基于 jQuery 的扩展，尽可能的提高复用性，并将写的过程中的一些思维发散进行了一个整理，进行记录分享。

需求拆解

其实就是最常见的一个轮播，如下图所示：

1.有一系列的图片做成的轮播，可以逐个展示；
2.交互1：左右按钮，点击切换轮播，按照既定的动画/展示效果进行图片的切换，并和下部工具条进行联动；
3.交互2：点击下部工具条，可以跳转到指定的图片上；
4.交互3：点击每张图片都会有一个回调函数，进行指定操作：跳转/锚点…

就是很常见的一个特效，也很少有人花功夫去重复造轮子了，本着颗粒归仓的原则，简单记录一下。

思路整理

思路主要分为 个部分：

一、技术选型

所谓的技术选型只是因为本次需求希望脱离 VUE/REACT 框架去做，也就是说要基于原生 html+js+css 去实现。这样一来就会脱离 webpack 一类的打包工具，有些兼容性方面的问题就需要去考虑一下了。

最终选择 jQuery 的原因有三个：

1.同页面已经引入了 jquery
2.站在 html+js+css 的技术栈角度，难免会操作dom，$ 是一个不错的选择
3.本案例图片切换效果是 渐入渐出 ，而 jQuery 刚好有这么一对方法 fadeIn/fadeOut

二、使用方法

既然已经确定了技术栈，那么就要想一下，如何去调用这个方法更好呢？而在如何调用方法的前面就是，是直接操作dom，还是以数据去驱动 dom 的渲染？

我经常用的几个方法如下：

• const loop = new LoopEvent(selector, arr, fn)
• $(selector).loopEvent(arr, fn)
• loopEvent(selector, arr, fn) 第二个问题当然是以数据去驱动dom的渲染了。

思考结束，我先放一下我的使用方法：

<div class="loop"></div>

<script> var loop = new LoopEvent($(".loop"),