jquery图片轮播原理解析Word文档格式.docx

jquery图片轮播原理解析Word文档格式.docx

《jquery图片轮播原理解析Word文档格式.docx》由会员分享，可在线阅读，更多相关《jquery图片轮播原理解析Word文档格式.docx（10页珍藏版）》请在冰点文库上搜索。

先上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秒钟调用动画处理函数，是的图片运动起来。

手动控制图片

上面这个实例比较简单，也比较傻。

大家可以试想一下，在用户刚刚看完第三张图，接着第四张图就播放了，然后反向，又看到了第三张图。

这样往复下去，刚刚看到的图片又播放了出来，而想看更早的图片，又还要等到很久才播放出来。

这样人的短时记忆会比较不均匀，那么网站图片的曝光率和广告展示效果就会打折扣。

网站的内容给人不好的感觉，用户体验就会比较差，进而产品的可用性也不会很好。

下面我再将上面的HTML、CSS和javascript代码做一个改动，变成一个新的形式。

这种形式就是，图片不会自动的循环播放，而是给用户提供一个导航器，让用户自己看他们想看的图片。

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

ul>

，给用户提供4个控件，对应上面的4幅图片

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

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

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

导航器中的标签

Index的值

Left的值

1

-900*index=0

2

-900*index=-900

3

-900*index=-1800

4

-900*index=-2700

图片每滑动一次，left的变化都是-900的倍数。

这样就实现了当鼠标放在导航器的数字上，ul的left坐标发生变化的效果。

这种效果比较死板，但是可以由用户自己操作。

图片自动向一个方向播放

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

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

这是精华部分。

动画控制函数中，通过width（）函数获得类名称为“.img”的ul中的第一个li的宽度，其实每个li的宽度都是一样的。

然后在animate动画函数中让ul的marginLeft属性变为负的一个宽度，这样处理后的效果就是ul正好向左运动了一个图片的宽度，因为div的overflow：

hidden，所以第一幅图被隐藏，从而显示出了第二幅图。

而当第四幅图显示出来后，程序中的appendTo（）方法会把第一幅图的li标签追加到第四幅图中，这样就开始了第二轮的图片播放。

按照这样的原理循环往复，就实现了图片轮播的效果。

另外我也实验了一下，将上图的代码中的marginLeft改为left，效果也是相同的。

因为div的position：

relative，是相对定位，而div的子节点ul的position：

absolute，是绝对定位，所以ul的left属性就是ul相对于div的左坐标的值，left=0表示ul的左边沿与div的左边沿对齐，而当left=-一幅图片的宽度，则正好显示出第二幅图，第一幅图被隐藏掉了。