Help with simple jQuery + png image rotator

Hi guys,

I was hoping that someone might know a trick to make this work.

I've just worked through the Lynda.com jQuery tutorials and I'm trying to add an image rotator to my site.

I've got it to work exactly as it should, but in the tutorial they were using JPEGs, and I'm using PNGs with transparency, so unfortunately the z-sorting can be seen by the user.
http://printing.alpha-duplication.com/business-cards.html

Here's the code:


HTML

<div id="photoShow">

<div class="current">
<img src="image1.png" width="360" height="360" />
</div>
<div>
<img src="image2.png" width="360" height="360" />
</div>
<div>
<img src="image3.png" width="360" height="360" />
</div>
<div>
<img src="image4.png" width="360" height="360" />
</div>
<div>
<img src="image5.png" width="360" height="360" />
</div>

</div>


jQuery

$(function() {
setInterval("rotateImages()", 3000);
});

function rotateImages() {
var oCurPhoto = $("#photoShow div.current");
var oNxtPhoto = oCurPhoto.next();

if (oNxtPhoto.length == 0)
oNxtPhoto = $("#photoShow div:first");

oCurPhoto.removeClass("current").addClass("previous");
oNxtPhoto.css({opacity:0.0}).addClass("current").animate({opacity:1.0}, 1000,
function() {
oCurPhoto.removeClass("previous");
});
}


CSS

#photoShow {
margin: 0px;
padding: 0px;
height: 360px;
width: 360px;
}
#photoShow div {
position:absolute;
z-index:0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}


I'd be greatful for any tricks or advice.

Kind Regards,
Clint

Adobe CS4 Master Suite
Vista Ultimate 64 SP1
Intel Core i7 920 @ 3.60GHz
12 GB DDR3 RAM
NVidia Quadro FX 3700
Matrox RT.X2 LE Capture Card
4 TB RAID 5