CSS图像滑块不滑动答案

【问题标题】：CSS image slider doesn't slideCSS图像滑块不滑动
【发布时间】：2015-01-28 21:58:17
【问题描述】：

我正在构建一个包含 5 张图片的图片滑块，这些图片显示在我的网页顶部。当我在线测试时，会显示第一张图片。但它不是动画。谁能帮帮我:)

这是我的 HTML：

<div id="slider">
        <figure>
            <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
        </figure>
</div>

这是我的 CSS：

div#slider { 
display: block;
position: relative;
overflow: hidden;
 -webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 2px 4px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 2px 4px 0px rgba(50, 50, 50, 0.75);}


div#slider figure img { 
    width: 20%; 
}
div#slider figure { 
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    font-size: 0;
    -webkit-animation: 30s slidy infinite;
    -moz-animation: 30s slidy infinite;
    animation: 30s slidy infinite;
}



div#slider .title{
    z-index:100;
    position:absolute;    
    color:white;
    font-size: 11pt;
    bottom: 0;
    margin-left: 5%;
    width: 90%;
}

@keyframes slidy {
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

为什么图片不向左滑动？我想让它在 iOS 和 Android 设备上运行。

【问题讨论】：

It works fine for me

标签： html css slideshow css-animations

【解决方案1】：

代码是正确的，但@keyframes 不适用于所有浏览器，所以我添加了 -webkit-keyframes，它对我有用。

@-webkit-keyframes slidy /* Safari and Chrome */
{
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

这是一个演示：http://jsfiddle.net/RX3jN/

【讨论】：

这是评论，不是答案
非常感谢！！你是我的英雄

【解决方案2】：

您缺少处理效果和转换的整个 javascript。我建议您在 http://wowslider.com/index.html#overview 等网站上阅读更多相关信息

一般来说，您定义了 HTML 和 CSS，还定义了一些 JS（需要 javascript 才能使其工作）您可以使用现有框架（一组函数使任务更容易）或手动完成（编写所有需要的代码）。

【讨论】：