Question

我已经看过css的非常有用的建议，用于处理放置在非透明图像上的一堆完全重叠的透明图像（在我的情况下，地图但不是谷歌类型的地图，只是一个线条图）。有人可以帮我把它变成幻灯片吗？我希望逐步将图像直接堆叠在一起，以便用户看到视觉信息的积累。

Answer 1

<强> 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>

幻灯片使用重叠的透明图像

1 个答案: