css3 translated实现的无缝轮播图原理？

Question

在别的网站上看到的css3 translated实现的无缝轮播图，为什么4组图片轮换的时候，要多写两个一样的轮播容器呢？这是基于什么原理？？？

Answer 1

无缝切换布局：

p4 1 2 3 4 p1

p4图 和 序号4一模一样
p1图 和 序号1一模一样

切换过程（点击下一张按钮）：

1

2

3

4

p1 // 结合上面的布局，这个时候已经是最后一张图片了。

   // 到这就是无缝切换的核心了：

   // 正常过渡到 p1 后（有动画效果），取消过渡效果的切换回 序号1（无动画效果，瞬间切换回去）

   // 顺序就开始了轮回

1 <--------

2         |

3         ^

4         |

p1 ------->

因此才要这样布局....

Answer 2

这是因为在播放到最后一张图的时候需要拉回到最开始那张图重新轮播，如果没有那张重复的图，给人的视觉就是直接到达第一张图，没有无缝轮播的效果，用了这张重复的图之后，到了最后一张图，给人视觉上的欺骗，直接拉回到那张重复的图，用户眼睛看到的是最后一张，实际上已经重新开始轮播了，这样做到无缝滚动。

能看得明白吗，描述的不是很清楚，希望能帮到你