首先，在解析轮播图的实现原理之前，我们得知道什么是轮播图。
顾名思义，轮播图就是在网页中能够循环播放并且可以手动切换的图片。轮播图一般作为banner出现在网页头部靠下的位置，用以向用户展示一些比较重要或热门的东西。
轮播图的播放效果有很多种，今天我们只取其中一种进行原理解析，因为虽然效果略有不同，但是实现机制却也相差无几。
总体思路是：
1．html布局上：在最外层套一个盒子，暂且称它为box，宽度为一张图片的宽度，设置相对定位和溢出隐藏，为了方便，box里面放一个ul，设置绝对定位，ul里面便是一个li放一张图片，然后让li浮动，再给box定位一个左右按钮和一个用来放控制图片的小圆点的ol。
2．css设置样式：定义一个active的class来控制被选中的小圆点的样式
3．js控制轮播：
a准备工作：引入一个运动的插件，获取需要的box、ul、li、ol、按钮，获取图片的张数和宽度，然后克隆第一张图片插入ul里面，给ul设置宽度为(图片数量+1x图片宽度),
定义一个空数组arr存储小圆点，index存当前图片，btnIndex存小圆点下标，标志位flag判断图片是否处于播放状态。
b制作轮播：用for循环创建与图片数量相等的小圆点，给它绑定点击事件，并给第一个小圆点加上active的class，将创建的小圆点插入定义的数组，将小圆点从内存里拿出来放到ol里面。
点击小圆点控制图片切换：点击时先利用flag判断当前图片是否处于播放状态，如果未播放就设为播放状态，然后将上一张图片的active清除并给当前图片加上active，相应的index和btnIndex也得变为当前的，用运动插件控制ul进行定位，动画结束时将flag变为未播放状态。
点击向右切换：首先同样判断图片的播放状态，清除上一张图片对应的小圆点的样式，并让图片和小圆点对应的index和btnIndex分别+1，然后判断index等于图片数量和大于图片数量，如果等于，就让btnIndex = 0，如果大于就让index=btnIndex-=1
并让ul的left为0，然后给当前图片对应的小圆点添加active，并用运动插件控制ul进行定位，动画结束时将flag变为未播放状态。
点击向左切换：同样判断图片的播放状态，清除上一张图片对应的小圆点的样式，并让图片和小圆点对应的index和btnIndex分别-1，然后判断
Index<0或者btnIndex<0,如果其中一个小于0，就将ul的left赋值为负的(图片数量x图片宽度)，并让index和btnIndex都等于(图片数量-1), 然后给当前图片对应的小圆点添加active，并用运动插件控制ul进行定位，动画结束时将flag变为未播放状态。
定时器控制图片自动播放：创建一个定时器timer，当鼠标mouseenter时，在定时器里面调用向右切换的函数，当鼠标mouseleave时，清除该定时器。
至此，一个完整的图片轮播就完成了。在此附上一个完整轮播图的代码，代码仅供帮助理解使用，切勿盲目复制。