刪除多餘的圖像不能正常工作

我試過使用這個CSS3滑塊代碼，我一直試圖在Dreamweaver中工作。刪除多餘的圖像不能正常工作

它工作正常，但我只想使用3張圖片來滑動。出於某種原因，它會繼續保持第四個滑塊和第五個，並且只顯示這兩個圖像的黑屏。

我試着拿出HTML和CSS以及循環第四和第五幀@keyframes的動畫，但由於某種原因，它仍然顯示出來，我不知道該怎麼做。

網站鏈接：http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

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

來源

2013-10-20 Loungin Out

這是因爲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滑塊。

我希望這對你有所幫助。

來源

2013-10-20 23:15:04

謝謝你，我很欣賞它。事情是我在2013年免費wordpress主題即時通訊使用加jquery中遇到麻煩加我不想減慢頁面速度，這就是爲什麼即時通訊只使用純CSS。但我發現這個滑塊的另一個問題。在顯示最後一面後，它不會重置回原來的幻燈片，它不適用於任何設備。我試圖從我的nexus平板電腦觀看演示，但仍然沒有運行，它不會返回到原來的幻燈片，只是在最後一張幻燈片後留下黑屏 –

刪除多餘的圖像不能正常工作

回答

相關問題