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

【问题标题】：How do I animate a block of divs inside a container automatically?如何自动为容器内的 div 块设置动画？
【发布时间】：2025-12-16 04:00:01
【问题描述】：

我正在为网站构建报价/推荐显示，我想在同一个容器中显示多个 sn-ps。下图应该有助于澄清后面的文字......

我有一个内置到侧边栏中的容器，在这个容器内我创建了另一个子容器，其中一系列 div 设置为 display:inline。我想做的是显示 div 01，然后，在一定时间后，让子容器向左滑动并显示 div 02 - 等等。

然后，当它走到尽头时，比如 div 10，我希望它继续向左滑动并再次显示 div 01 而不是向右滑动 - 一直返回所有 div 以到达 div 01。CSS3 动画功能或 JS 解决方案都可以 - 以最有效的方式为准。

【问题讨论】：

【解决方案1】：

这可以在 javascript 中使用循环轮播来完成。如果您可以通过结合自动滚动和循环功能使用 jQuery，jCarousel 将满足您的需求。

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

jCarousel 使用 UL 代替 div，但我确信还有其他插件/库可以让您的结构更加灵活。

【讨论】：

【解决方案2】：

如果您像这样将项目包装在 div 中并最后重复第一项：

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

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

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

【讨论】：