关于轮播图的技术理解你知道多少

众所周知，轮播图现今在网页中占据着必不可少的地位。

任何的一个网站，一个网页，都会出现一个轮播图，而轮播图更是利用JavaScript作出的一个比较基础的动画。

下面是我本人对写轮播图的一点看法，不少地方可能不是很全面，甚至可能说是错误的，但愿老师们指点。

下面这个是我本身闲暇时随便作的一个轮播图：

我以为轮播图中最主要的是要理解到图片为何会滑动，是怎么控制的。上面这个我本身作的，是搭好的一个结构，在无序列表中插入须要的图片。

而后在插入图片的后面添加一个空的无序列表，做为轮播图中下方的小点。

而后就是css中书写样式了，首先确定得把无序列表中的li从从上至下排列变为水平方向排列，也就是给li添加一个float属性；

而后有一点须要注意，轮播图外面的大盒子必须设置为图片的大小，超出的隐藏，这样能够刚恰好显示出一张图片。

而后装图片的ul的宽度必须大于或者等于全部图片总宽度。一样，这里也须要运用一个定位的知识，子绝父相。

给class为box的盒子设置相对定位，装图片的ul设置绝对定位。这里，尽管轮播图下面几个点没有，可是咱们要把样式先写好，而后后面经过JavaScript添加。

主要样式以下：

在HTML文件和css样式表都已经写好以后，咱们就能够开始书写js代码了，让图片动起来。

在JavaScript中让图片动起来的核心函数是setInterval(function（）{}，value);

这个函数是一个定时器，第一个参数是你想让某个对象执行的事件或者动做，而后第二个参数value则是时间，意思是多少时间执行一次。

而后在轮播图中，想让图片动起来而且从视觉上看没什么异样，咱们首先须要克隆第一张图片，而且将第一张图片加在最后。具体代码以下：

这个代码是用jQuery书写的，首先获取到轮播图那个大盒子，而后再找到轮播的图片这个对象；

而后用first（）方法找到第一张照片，而且用clone（）这个方法将第一张照片克隆；

最后用append（）方法把克隆下来的这张照片添加到全部轮播图片的后面，这样克隆工做就完成了。

接下来就是让这个图片动起来了，动起来很简单，只须要设置一个定时器就ok，代码以下：

这时定时器中的move（）函数并无定义，接下来咱们就定义这个函数，代码以下：

首先要定义一个变量i，初始值为0，每执行一次定时器，i的值便会加1。在定义一个size值，令其等于轮播图中图片的数量。

而后让装全部图片的容器往左移动图片的宽度*i，这样在定时器的配合之下，图片就会一张一张的一次展现。

可想而知，i的值确定有个范围，不可能让它永远的加大，所以在move函数中，咱们须要一个断定。

当i=size的时候，这个时候轮播图中的照片确定已经到了最后一张，这个时候咱们前面克隆了第一张照片加在最后，所以这张照片虽然是最后一张，可是其实它是第一张照片。

这时，咱们就须要重置i的值，令i=1；而且经过jQuery控制样式，令装照片的容器回到初始位置，开始新的一次运动。

最后就是初始图片中的那几个点了，这个更简单了，咱们获取了size的值以后，再经过for循环，就能够添加那几个点了。代码以下：

这个难点在于怎么让小点的位置随着图片的移动而移动。

首先咱们默认将在css中定义好的样式赋予第一个小点。代码以下：

而后就是在move函数中定义小点的相应的移动,代码以下：

很明显，小点的样式也是经过i来肯定的。

这里有一个误区，不少人会认为第一个小点就是1，可是其实不是，由于数组是从0开始的，因此第一个小点是0。

i的值表明了显示的是第i-1张图片，因此这个时候只须要将样式赋予第i个点就好了，而且同时要清除其余的点的样式。

特殊的当i=size-1的时候，这个时候，显示的是最后一张图，这张图下面那张图就是第一张图的克隆图，所以，这个时候，小点的样式就须要添加给第一个点。

完成以上操做以后，简单的轮播图就作好了。