图片轮播原理

1. 创建一个视窗div,大小和图片相同

2. 创建一个图片承载div,宽度是所有图片宽度总和(也可以尝试用inline的ul实现

3. 通过animation移动载体div,即可实现轮播

如何实现无缝的回环轮播呢,这里要注意,animation是并行处理的,我们需要在divContainer前后加上缓冲图片,如下所示:

3 1 2 3 1

当用户快速点击切换的时候,如果检测到在缓冲区,就要stop并行的动画线程,并将整个divContainer移动到非缓冲区对应的位置。

注意,动画可能进行了一半,所以我们需要记录stop时的坐标位置。

还需要一个callback,在动画执行完成之后调用,自动触发切换。

 

这里引入JS的异步机制,需要专门说明。

posted @ 2017-09-06 09:53  folkzy  阅读(171)  评论(0编辑  收藏  举报