如何自动为容器内的div块设置动画？

Question

我正在为网站构建报价/推荐显示，我希望在同一个容器中显示多个代码段。下图应该有助于澄清后续文本......

我有一个内置在侧边栏中的容器，在这个容器内我创建了另一个子容器，其中设置了一系列显示的div：inline。我想要做的是显示div 01然后，经过一段时间后，让子容器向左滑动并显示div 02 - 依此类推。

然后，当它到达结尾时，比如div 10，我希望继续滑动到左边并再次显示div 01而不是滑动到右边 - 一直回到所有div到达div 01. CSS3动画功能或JS解决方案都很好 - 哪个可能效果最好。

Answer 1

如果您将项目包装在div中，并重复最后一项：

--------------------------
|======= ======= ======= |
||div 1| |div 2| |div 1| |
|======= ======= ======= |
--------------------------

您可以设置一个计时器，每隔<inner div width>秒移动包装div <x>的左边缘。然后，当你到达最后一个（它是第一个的副本）时，在滚动到它之后，你只需将整个包装器移回零左值，没有人更聪明 - 因为它看起来与它们相同

编辑：我的意思不是将它设置回原点，我的意思是简单地将左边设置为零。没有视觉上的变化，但你可以继续左移，没有任何问题。

Answer 2

这可以在带圆形旋转木马的javascript中完成。如果您可以通过组合自动滚动和循环功能来使用jQuery，jCarousel将完成您所需的工作。

$('#mycarousel').jcarousel({
    auto: 2, // auto-scroll every two seconds
    wrap: 'circular'
});

jCarousel使用UL而不是div，但我确信还有其他插件/库可以让你对你的结构更加灵活。