css - 使用纯 CSS3 的无限图像 slider

Question

CSS3 制作的 slider 例子很多，但几乎所有的例子都需要点击触发来改变幻灯片。我想知道是否有可能制作一个自动 slider ，它可以连续无限地改变幻灯片。

例如，考虑一个结构

<div class="parent">
    <div class="child">
       First DIV
    </div>
    <div class="child">
       Second DIV
    </div>
    <div class="child">
       Third DIV
    </div>
</div>

使用 CSS

.parent {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.child {
    width: 100%;
    height: 100%;
    float: left;
}

我们可以在 parent 框架内连续滚动 child 元素吗？

Answer 1

正如您所建议的，我应该回答而不是发表评论，所以就这样吧，您可以在此处引用来源 - http://css3.bradshawenterprises.com/cfimg/它使用 CSS3 动画来交换图像。

尽管我建议您使用 jQuery 或 JS 而不是 CSS3 动画，因为它支持跨浏览器，尤其是在涉及 IE 时。