css - 纯 CSS3 的无限图像 slider

标签 css

有很多用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元素吗?

最佳答案

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

不过我建议你使用 jQuery 或 JS 而不是 CSS3 动画,因为它支持跨浏览器,尤其是 IE。

关于css - 纯 CSS3 的无限图像 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18863967/

相关文章:

javascript - 在表单的文本字段中设置默认文本

javascript - 如何使用Jquery多次打开聊天框?

html - 文本未与相应的复选框对齐

CSS - div定位问题

html - 将没有固定宽度的绝对元素水平居中

javascript - 保持元素在固定位置,直到它与另一个元素相交,导致它改变为绝对定位

css - 如何将公司 Logo 添加到 ShinyDashboard 标题(不是 mainPanel 或 mainHeader)

html - 可以在 css 边距值中使用负像素还是我应该做其他事情?

php - 如何将自定义 css 和 js 文件添加到 wordpress 的管理区域

html - 与 li parents 具有边界半径的 Accordion