前言
作为一个前端，写轮播(又叫跑马灯)是无法避开的一个需求点。
而随着各种框架以及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>
<scri