Question

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

它工作正常，但我只想使用3张图片进行滑动。出于某种原因，它只会继续保持第4个滑块和第5个滑块，只显示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滑块。

我希望这对你有所帮助。

删除不起作用的额外图像

1 个答案: