这次给代码中的图片带上链接，点击图片后页面会跳转，在浏览器的新标签中会打开一个新页面。
这是精华部分。动画控制函数中，通过（）函数获得类名称为“”的中的第一个的宽度，其实每个的宽度都是一样的。然后在动画函数中让的属性变为负的一个宽度，这样处理后的效果就是正好向左运动了一个图片的宽度，因为的：，所以第一幅图被隐藏，从而显示出了第二幅图。而当第四幅图显示出来后，程序中的（）方法会把第一幅图的标签追加到第四幅图中，这样就开始了第二轮的图片播放。按照这样的原理循环往复，就实现了图片轮播的效果。
另外我也实验了一下，将上图的代码中的改为，效果也是相同的。因为的：，是相对定位，而的子节点的：，是绝对定位，所以的属性就是相对于的左坐标的值，表示的左边沿与的左边沿对齐，而当一幅图片的宽度，则正好显示出第二幅图，第一幅图被隐藏掉了。
然后通过的：属性设置后，显示的效果如下
当然，在里面还需要让、、、的外部间隔和内部填充和都为，让这些有着包围关系的元素紧密的挨在一起。
接下来，就是要让这些图片以类似于电影胶片的原理朝着一个方向进行滑动。
这里的代码主要是在改变的坐标。默认最开始的的值为，这时正好显示出第一幅图片。
代码中，如果当前的坐标为时，设定一个方向的属性；当坐标变成时，即当图片从左到右播放到第四张的时候，。而在接下来的动画处理代码中，是在循环的改变的值。经过上面的（）函数后，最后通过（）来每间隔秒钟调用动画处理函数，是的图片运动起来。
下面我再将上面的、和代码做一个改动，变成一个新的形式。这种形式就是，图片不会自动的循环播放，而是给用户提供一个导航器，让用户自己看他们想看的图片。
在代码中增加这样一个导航<>，给用户提供个控件，对应上面的幅图片
在代码中，让这个导航块相对于容器，位于右下角，而且层次要高于图片，要浮于图片之上
在代码中加入这样的几行就可以实现，当鼠标放在了某个数字上的时候，的发生相应的变化。
（）方法是遍历对象数组，里面的就是这个数组中对应的下标，的值与导航的对应关系为
导航器中的标签
的值
的值
*
*
*
*
图片每滑动一次，的变化都是的倍数。这样就实现了当鼠标放在导航器的数字上，的坐标发生变化的效果。这种效果比较死板，但是可以由用户自己操作。
图片自动向一个方向播放
接下来，我把之前的《新闻栏文字滚动效果解析》中的技术，应用到图片轮播效果中，让若干图片一直朝着同一个方向按照一定的时间间隔持续的运动，实现图片轮播的效果。
图片轮播原理解析
本网站首页和自我介绍子页面的图片轮播效果就是按照本文的原理实现的
正向反向图片滚动
在一些网站上，会经常看到有这样的特效，就是图片轮番的滚动播放。要么从一个方向播放完后，又反向的播放回去，即，然后 。这个效果的实现代码很简单，只要掌握了原理就能够做出来签结构用下图表示就是
手动控制图片
上面这个实例比较简单，也比较傻。大家可以试想一下，在用户刚刚看完第三张图，接着第四张图就播放了，然后反向，又看到了第三张图。这样往复下去，刚刚看到的图片又播放了出来，而想看更早的图片，又还要等到很久才播放出来。这样人的短时记忆会比较不均匀，那么网站图片的曝光率和广告展示效果就会打折扣。网站的内容给人不好的感觉，用户体验就会比较差，进而产品的可用性也不会很好。