js之轮播图的实现

                                                                             js之轮播图的实现

在很多的网页或者是手机app上都可以看到图片轮播这个功能，我最早接触到的js的一个小功能就是轮播图的实现。废话不多说，直入主题，我们要实现轮播首先要注意的就是我们要实现无缝轮播，图片在切换的切换的过程中设置轮播时如果要实现四张的图片那就必须需要五张图片布局在页面上，为什么要这样呢，首先清楚要实现这个功能我们改变的是包裹整个图片的边框的offsetLeft值，每一次移动的就是一张图片的宽度，当图片切换到第四张图片时。我们就手动的将包裹图片的offsetLeft值设置为第一张图片的offsetLeft值，然后在展示第四张图片后如果不设置，就会使得这个图片展示出现一个空白区，当设置之后我们在展示图片移动这个过程的时候，在这个移动的过程中我们看到的是第一张图片的内容，最后显示的内容也是第一张，而此时的offsetLeft也已经跳转到了第一张图片的内容了。因此给用户在视觉上就呈现了这个无非连接的过程。我们要实现的效果图如下。

接下来就是对于轮播解构上代码布局的展示：

首先就是整个的展示区wrapper,然后就是用ul与li来展示图片区域当中的内容。接着就是两个按钮，然后就是用span来表示小圆点，当点击每个小圆点时，就会展示其对应的图片。接着就是样式上的布局，首先就是图片展示区域当中的内容。代码如下:

首先就是list-none去去除掉默认样式中ul与li当中的小圆点，然后就是整个wrapper区域中的内容，这个部分要看到图片中的展示，因此我们改变的包裹图片的offsetLeft值就不是它而是ul，用它来包裹这个图片，这里设置相对定位与绝对定位来控制。并且要将ul也就是上面代码当中的slidePage区域当中的宽度设置为五张图片的宽度，在设置的时候可以通过像素也可以通过百分比来设置，在这里我设置的则是像素的大小。接着就是对于每张图片的宽度设置，将每一张图片的宽度设置为展示区的大小，然后每次移动的距离的宽度也为展示区的宽度，这就是轮播的原理。设置float也就是设置其每张图片时横向排列的。下面所展示的就是按钮以及小圆点的样式布局代码如下：

其样式布局样式代码如上，通过绝对定位与相对定位来实现这里也就不多说了。其中需要注意的地方是active样式，最后展示的内容中图片展示的内容也就标志着小圆点的当前位置是什么，这如何直观的观察呢，那就是将这个小圆点加上active这个选择器，后面部分可以通过实时的增与移除这个选择器来反应出当前图片多对应的小圆点位置。说到这里，布局与样式上的工作也就完成了，那么接下来就是使得图片动起来。首先通过下面的代码我们要知道需要用到什么内容。代码如下：

首先我们需要获取到包裹图片区域的dom节点以及其下面的图片的总张数减一，然后需要获取到左右按钮，接着就是小圆点的dom节点，需要一个定时器也就是上面的timeOut 最后就是lock锁，当鼠标放上按钮或者是小圆点上时，轮播的效果取消。没有移动时就是自动轮播的过程。因此在这里我们需要封装图片移动的方法，然后将这个方法分别绑定在按钮与小圆点上，再这个方法绑定在定时器上，即可实现图片轮播。首先先看移动的方法：

在这里我们设置的定时器是setTimeout，因此只需要在最初的时候设置一次，然后再采用递归不停的调用这个方法即可。在图片轮播的时候分为两个方向，第一就是从左到右，第二就是从右到左。自动轮播的时候实现的是从左到右，因此在if语句中，符合里面不传入值与从左到右时，实现的就是包裹图片的区域offsetLeft减去图片的宽度。在这里还分别涉及到changeIndex方法与startMove()方法。首先说到的就是changeIndex()方法，主要是需要我们实时的去改变active的位置，在移动的过程中，触发的方向不一样,index的值加与减就不一样，然后将这个index值放入此方法中，然后就能实现图片上圆点样式上的改变，代码如下：

这个startMove()方法是在js中实现的一个为物体移动的方法的封装，在这里也可以采用css3来实现。那么让我们来看看这个运动的过程所封装的方法吧，代码如下：

上面封装的方法就是物体属性移动速度封装的原生js方法，具体也不再多叙述。因为在这里还可以使用css3上属性的变化来进行设置。本篇博客主要是讲的轮播实现过程。如果需要直接拿来用即可。在这段代码中还有个getStyle()方法，其是用来获取属性的具体实现代码如下：

接着就是小圆点绑定img图片采用for循环来实现，具体的代码如下所示：

最后就是按钮上方法的绑定：

到此位置，轮播的实现就结束。最主要就是图片的移动，与在最开始时布局上，轮播过程中图片移动的方式有很多种实现方式，在明白轮播原理后，很容易就能实现。最后希望这篇博客能帮到大家明白轮播的实现。