幻燈片使用重疊的透明圖像

Question

我已經看到了非常有幫助的建議爲css處理一堆完全重疊的透明圖像放置在一個非透明的圖像（在我的情況下，一個地圖，而不是谷歌型地圖，只是一個線條圖）。有人能幫我把它變成幻燈片嗎？我想逐步將圖像堆疊在一起，以便用戶看到視覺信息的積累。

Answer 1

這裏是一個非常簡單的實現：http://jsfiddle.net/r7B4n/

的JavaScript：

$('#showNext').click(function(e){ 
    e.stopPropagation(); 
    $('#slideShow li:hidden:first').fadeIn(); 
}); 

CSS：

#slideShow { 
    position: relative; 
    width: 300px; 
    height: 200px; 
    border: 1px solid #444; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    background: url(http://dummyimage.com/300x200/ccc/fff) 
} 
#slideShow li { 
    position: absolute; 
    left: 0; top: 0; 
    display: none 
} 

HTML：

<ul id="slideShow"> 
    <li><img src="http://i.stack.imgur.com/hCTLO.png" /></li> 
    <li><img src="http://i.stack.imgur.com/Zm25l.png" /></li> 
    <li><img src="http://i.stack.imgur.com/3Rtc5.png" /></li> 
    <li><img src="http://i.stack.imgur.com/cg3MF.png" /></li> 
</ul> 
<a href="#" id="showNext">Show next image</a>