Question

我的网页上有4张图片。我在无限循环中使用CSS从一个图像淡入下一个图像。我想强制'幻灯片放映'的方向，使它从html中引用的第一个图像开始，然后依次移动到第四个图像（1 - ＆gt; 2 - ＆gt; 3-＆gt; 4），然后返回到开始并且无限循环。

如果我尝试在CSS中指定正确的顺序，第四张图像会在从头开始进入循环之前首先显示较长的延迟。

我只能以相反的顺序正确地循环图像 - 也就是说4,3,2,1。我不介意这么多，除了我计划回退到不支持CSS3的浏览器的jQuery Cycle Lite，我知道Cycle Lite将按照标记中引用图像的顺序循环（1,2， 3,4等）。

我的代码如下：

HTML

<div id="cf4a" class="shadow">
   <img alt="Image1" src="../Banners/Image1.png" />
   <img alt="Image2" src="../Banners/Image2.png" />
   <img alt="Image3" src="../Banners/Image3.png" />
   <img alt="Image4" src="../Banners/Image4.png" />
</div>

CSS

@-webkit-keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

@-moz-keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

@-o-keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

@keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

#cf4a {
   position:relative;
   height:350px;
   width:990px;
   margin:30px auto;
}

#cf4a img {
   position:absolute;
   left:0;
}

#cf4a img {
   -webkit-animation-name: cf4FadeInOut;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 32s;

   -moz-animation-name: cf4FadeInOut;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-iteration-count: infinite;
   -moz-animation-duration: 32s;

   -o-animation-name: cf4FadeInOut;
   -o-animation-timing-function: ease-in-out;
   -o-animation-iteration-count: infinite;
   -o-animation-duration: 32s;

   animation-name: cf4FadeInOut;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-duration: 32s;
}

#cf4a img:nth-of-type(1) {
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
}

#cf4a img:nth-of-type(2) {
   -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   -o-animation-delay: 8s;
   animation-delay: 8s;
}

#cf4a img:nth-of-type(3) {
   -webkit-animation-delay: 16s;
   -moz-animation-delay: 16s;
   -o-animation-delay: 16s;
   animation-delay: 16s;
}

#cf4a img:nth-of-type(4) {
   -webkit-animation-delay: 24s;
   -moz-animation-delay: 24s;
   -o-animation-delay: 24s;
   animation-delay: 24s;
}

所以，如果有人可以建议如何让我的幻灯片显示工作而不显示第4张幻灯片24秒才行动，我会非常感激。

感谢并为这篇长篇文章感到抱歉。

莱昂

Answer 1

在您的情况下，最简单的方法是更改z-index

#cf4a img:nth-of-type(1) {
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;

    z-index:4;
}

#cf4a img:nth-of-type(2) {
   -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   -o-animation-delay: 8s;
   animation-delay: 8s;

    z-index:3;
}

#cf4a img:nth-of-type(3) {
   -webkit-animation-delay: 16s;
   -moz-animation-delay: 16s;
   -o-animation-delay: 16s;
   animation-delay: 16s;

    z-index:2;
}

#cf4a img:nth-of-type(4) {
   -webkit-animation-delay: 24s;
   -moz-animation-delay: 24s;
   -o-animation-delay: 24s;
   animation-delay: 24s;

    z-index:1;
}

演示 http://jsfiddle.net/gaby/ZUErm/

如何强制CSS3幻灯片动画以正确的顺序显示？

1 个答案: