0

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

它工作正常，但我只想使用 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/

4

1 回答 1

1

这是因为动画.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 滑块。

我希望这对你有所帮助。

于 2013-10-20T23:15:04.017 回答