html - 删除多余的图像不起作用

Question

我尝试使用我一直试图在 Dreamweaver 中工作的这个 CSS3 slider 代码。

它工作正常，但我只想使用 3 张图像来滑动。出于某种原因，它只会继续到第 4 个 slider 和第 5 个 slider ，并且只为这 2 个图像显示黑屏。

我尝试取出 HTML 和 CSS 以及动画循环第 4 和第 5 帧@keyframes，但由于某种原因它仍然继续显示，我不知道那是怎么可能的。

网站链接:http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

演示链接:http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/

Answer 1

是因为animation.css

您需要根据需要为动画计时。

我在 Firefox 中试了一下，但这不是我能想到的最好的。 这就是我所做的。在删除最后 2 帧和它们的所有 css 后，我玩了前 3 帧。给你:

@-moz-keyframes cycle {
0%  { top:0px; opacity:1; }
33% { top:0px; opacity:1; } 
66% { top:325px; opacity:0; }
100%{ top:-325px; opacity:0; }

}
@-moz-keyframes cycletwo {
0%  { top:325px; opacity:0; }
33% { top:-352px; opacity:0; } 
66% { top:0px; opacity:1; }
100%{ top:325px; opacity:1; }
}
@-moz-keyframes cyclethree {
0%  { top:325px; opacity:1; }
33% { top:352px; opacity:0; } 
66% { top:-352px; opacity:0; }
100%{ top:0px; opacity:1; }
}

尝试根据您的需要安排合适的时间，因为网站 http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/向您展示如何。

不过我会使用 jQuery slider 。

希望对你有帮助。