1. 创建一个视窗div,大小和图片相同
2. 创建一个图片承载div,宽度是所有图片宽度总和(也可以尝试用inline的ul实现)
3. 通过animation移动载体div,即可实现轮播
如何实现无缝的回环轮播呢,这里要注意,animation是并行处理的,我们需要在divContainer前后加上缓冲图片,如下所示:
3 1 2 3 1
当用户快速点击切换的时候,如果检测到在缓冲区,就要stop并行的动画线程,并将整个divContainer移动到非缓冲区对应的位置。
注意,动画可能进行了一半,所以我们需要记录stop时的坐标位置。
还需要一个callback,在动画执行完成之后调用,自动触发切换。
这里引入JS的异步机制,需要专门说明。