图片轮播原理解析

@本网站首页和自我介绍子页面的图片轮播效果就是按照本文的原理实现的@

正向/反向图片滚动

在一些网站上，会经常看到有这样的特效，就是图片轮番的滚动播放。要么从一个方向播放完后，又反向的播放回去，即1-2-3-4，然后4-3-2-1 。这个效果的实现代码很简单，只要掌握了原理就能够做出来。

先上HTML代码

接下来，就是要让这些图片以类似于电影胶片的原理朝着一个方向进行滑动。

这里的javascript代码主要是在改变ul的left坐标。默认最开始ul的left的值为0，这时正好显示出第一幅图片。

Javascript代码中，如果当前的left坐标为0时，设定一个方向的属性flag=go_to_left；当left坐标变成-2700时，即当图片从左到右播放到第四张的时候，flag=go_to_right。而在接下来的动画处理代码中，是在循环的改变left的值。经过上面的showImage（）函数后，最后通过setInterval（）来每间隔1秒钟调用动画处理函数，是的图片运动起来。

手动控制图片

上面这个实例比较简单，也比较傻。大家可以试想一下，在用户刚刚看完第三张图，接着第四张图就播放了，然后反向，又看到了第三张图。这样往复下去，刚刚看到的图片又播放了出来，而想看更早的图片，又还要等到很久才播放出来。这样人的短时记忆会比较不均匀，那么网站图片的曝光率和广告展示效果就会打折扣。网站的内容给人不好的感觉，用户体验就会比较差，进而产品的可用性也不会很好。

下面我再将上面的HTML、CSS和javascript代码做一个改动，变成一个新的形式。这种形式就是，图片不会自动的循环播放，而是给用户提供一个导航器，让用户自己看他们想看的图片。

在HTML代码中增加这样一个导航

在CSS代码中，让这个导航块相对于div容器，位于右下角，而且层次要高于图片，要浮于图片之上

在javascript代码中加入这样的几行就可以实现，当鼠标放在了某个数字上的时候，ul的left发生相应的变化。

each（）方法是遍历li对象数组，里面的index就是这个数组中对应的下标，index的值与导航的对应关系为

导航器中的标签Index的值Left的值

10-900 * index = 0

21-900 * index = -900

32-900 * index = -1800

43-900 * index = -2700

图片每滑动一次，left的变化都是-900的倍数。这样就实现了当鼠标放在导航器的数字上，ul的left坐标发生变化的效果。这种效果比较死板，但是可以由用户自己操作。

图片自动向一个方向播放

接下来，我把之前的《新闻栏文字滚动效果解析》中的技术，应用到图片轮播效果中，让若干图片一直朝着同一个方向按照一定的时间间隔持续的运动，实现图片轮播的效果。

这次给HTML代码中的图片带上链接，点击图片后页面会跳转，在浏览器的新标签中会打开一个新页面。