與HTML5/CSS3圖像堆棧

Question

我知道有很多例子，但本質上沒有通常參與，一個人如何可以使用新的HTML5 + CSS3風格做一個圖像堆棧中的任何垃圾，那就是：

• 唯一的單張影像顯示當時的一些事件（例如鼠標按下;循環）後顯示在前面的圖像
• 下一個圖像

我想知道如何使用新HTML5/CSS3風格做這個簡單的事？

Answer 1

我發現一個幻燈片的很好的例子，如果這就是你正在尋找的東西，沒有太多的額外內容。一個顯示下一張照片的計時器和另一個更改背景的計時器。

兩個CSS3的解決方案和每步好的一步的教程

Timed slideshow (box)
Timed slideshow (background)

我希望我沒有誤解你的問題。

Answer 2

個人而言，我會使用jQuery週期 - http://jquery.malsup.com/cycle/

<div id="shuffle" class="pics">  
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />  
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />  
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />  
</div> 

$('#shuffle').cycle({ 
    fx:  'fade', 
    delay: -4000 
}); 

我不知道有一個HTML5/CSS3方法，這是誠實的。它只是常規的CSS，因爲你所做的只是將容器設置爲圖像尺寸，然後將每個圖像設置爲絕對定位，以便將它們「堆疊」在一起。然後循環遍歷所有動畫。

你可以使用CSS3轉換，但你在你的問題中提到了jQuery，所以Cycle是你最好的選擇。

Answer 3

這是最好的，我曾經發現

.stack { position: relative; z-index: 10; } 
.stack img { max-width: 180px; height: 180px; vertical-align: bottom; border: 5px solid #fff; border-radius: 3px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 
    }