图片轮播原理解析..docxVIP

图片轮播原理解析@本网站首页和自我介绍子页面的图片轮播效果就是按照本文的原理实现的@正向/反向图片滚动在一些网站上，会经常看到有这样的特效，就是图片轮番的滚动播放。要么从一个方向播放完后，又反向的播放回去，即1-2-3-4，然后4-3-2-1 。这个效果的实现代码很简单，只要掌握了原理就能够做出来。???? 先上HTML代码上面的CSS代码的布局定位后，整体的标签结构用下图表示就是然后通过div的overflow：hidden属性设置后，显示的效果如下当然，在CSS里面还需要让ul、div、li、img的外部间隔和内部填充margin和padding都为0，让这些有着包围关系的元素紧密的挨在一起。???? 接下来，就是要让这些图片以类似于电影胶片的原理朝着一个方向进行滑动。这里的javascript代码主要是在改变ul的left坐标。默认最开始ul的left的值为0，这时正好显示出第一幅图片。Javascript代码中，如果当前的left坐标为0时，设定一个方向的属性flag=go_to_left；当left坐标变成-2700时，即当图片从左到右播放到第四张的时候，flag=go_to_right。而在接下来的动画处理代码中，是在循环的改变left的值。经过上面的showImage（）函数后，最后通过setInterval（）来每间隔1秒钟调用动画处理函数，是的图片运动起来。手动控