slideshow using overlapping transparent images

I have looked at the very helpful suggestions for the css for handling a bunch of exactly overlapping transparent images placed on a non-transparent image (in my case, a map but not a google-type map, just a line drawing). Could someone help me with turning that into a slideshow? I want to progressively stack images directly on top of each other so that the user sees an accumula开发者_C百科tion of visual information.

Here's a very simplified implementation: 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>