web前端端技术详细解析左右滑动轮播图

首先，在解析轮播图的实现原理之前，我们得知道什么是轮播图。

顾名思义，轮播图就是在网页中能够循环播放并且可以手动切换的图片。轮播图一般作为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判断图片是否处于播放状态。