图片轮播原理

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

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

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

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

3 1 2 3 1

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

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

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

 

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

转载于:https://www.cnblogs.com/folkzy/p/7483092.html