Question

我正在构建一个包含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设备。

Answer 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/

Answer 2

您缺少处理效果和转场的整个JavaScript。我建议您在http://wowslider.com/index.html#overview

等网站上阅读更多相关内容

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

CSS图像滑块不会滑动

2 个答案: