slideshow issue (stacking images)

slideshow issue (stacking images)

Hi People,

I used a script for a slideshow for my project, but I have some issues with the code.
I use PNG's for the slideshow, but the code seems to stack thePNG's over each other. Therefor the aplha seems way off... Is there a way to remove the previous image while sliding to the next one?
In short just show one image at a time.

source: http://lemarquis-design.com/v6/ (in progress)

Here's the code:

HTML
------
<div class="contentholder">
  <div class="innerslide" id="gallset" style="display:none;"> <p>Bonjour! My name is Dennis van Lith and I'm a freelance web & graphic designer..</p>
    <div id="slideshow">
    <img src="slide_one.png" alt="Grand Salon Website 2011" class="active" />
    <img src="slide_two.png" alt="Grand Salon Website 2007" />
    <img src="slide_one.png" alt="Personal Portfolio 2005/2011" />
    <img src="slide_two.png" alt="Flash Video Player" />
    <img src="slide_one.png" alt="Something else here...." /> </div>
  </div>
</div>
-----

CSS (if needed)
-----
.contentholder{
    width: 100%;
    height: 594px;
    margin-bottom: 600px;
}

.contentholder .innerslide p{
    margin-top:496px;
    color: #fff;
    font-family: 'Ave';
    font-size: 16px;
    text-shadow:rgba(0,0,0,0.5) 0 -1px 0;
    position:absolute;
    letter-spacing: 1px;
    z-index: 5;
}

.contentholder .innerslide{
    width: 960px;
    height: auto;
    margin: 0px auto;
}

.contentholder .innerslide #slideshow{
    width: 960px;
    height: 512px;
    list-style:none;
    margin: 80px 0px 0px 0px;
    position:relative;
    overflow:visible;
}

#slideshow img {
    margin-left: -100px;
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow img.active {
    z-index:10;
    opacity:1.0;
}

#slideshow img.last-active {
    z-index:9;
}
-----

JS
-----
/*slideshow actions*/
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1500, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});
-----