Javascript Slideshow is Flickering

[mhgenterprises]

I am having some trouble with a javascript slideshow that I am currently developing.

1. There is a flicker when all of the images are loaded onto the page. I have tried preloading the images (not necessary since they are all on the page and load by themselves) and the solution is to set display to none on each image until the slideshow starts. I have tried this a few different ways and have been unsuccessful. I am sure that I am setting them back to block in the wrong part of the code or doing something wrong.

2. It seemed to only be working in firefox. I don't understand why this would be.

The url is http://www.trideltauci.com/photos.php

Any help is greatly appreciated, I need to have this project done by Monday. I am stumped at the moment, so hopefully someone can help out. I am still pretty new to JS.

Thank you, (code is below)
Matt

Here is the CSS:

img.slide {
	position: absolute;
	top: 0;
	left: 0;
}
#slideshow {
	position: relative;
	width: 600px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	overflow: hidden;
}

Here is the included photos.js JavaScript:

var numslides=0,currentslide=0;
var slides = new Array();
imgs=document.getElementsByClassName("slide");
function MakeSlideShow() {
   	for (i=0; i<imgs.length; i++) {
      	if (imgs[i].className != "slide") continue;
      	slides[numslides]=imgs[i];
		if(i == 0) {
			slides[i].style.display="block";
		}else{
			slides[i].style.display="none";
		}
		numslides++;
   	} // end for loop
	var start=setTimeout("NextSlide()",3000);
} // end MakeSlideShow()

function NextSlide() {
	nextslide=currentslide + 1;
   	if (nextslide >= numslides) nextslide = 0;
	
	new Effect.Parallel([
   		new Effect.Fade(slides[currentslide], { sync: true }), 
  		new Effect.Appear(slides[nextslide], { sync: true }) 
	], { 
  		duration: 0.8
	});

	currentslide++;
   	if (currentslide >= numslides) currentslide = 0;
	next=setTimeout("NextSlide()",3000);
}

// create the slideshow when the page loads
window.onload=MakeSlideShow;

Here is part of the Head HTML section:

<link href="includes/tridelta.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tridelta.js"></script>
<script type="text/javascript" src="js/photos.js" language="javascript"></script>
<script type="text/javascript" src="js/prototype.js" language="javascript"></script>
<script type="text/javascript" src="js/scriptaculous.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
for(i=0;i<30;i++) {
	photo = new Image();
	photo.src = "images/photos"+i+".jpg";
}
</script>

Here is the body section:

<div id="slideshow">
<img class="slide" src="images/photos1.jpg" width="600px" height="400px">
<img class="slide" src="images/photos2.jpg" width="600px" height="400px">
<img class="slide" src="images/photos3.jpg" width="600px" height="400px">
<img class="slide" src="images/photos4.jpg" width="600px" height="400px">
<img class="slide" src="images/photos5.jpg" width="600px" height="400px">
<img class="slide" src="images/photos6.jpg" width="600px" height="400px">
<img class="slide" src="images/photos7.jpg" width="600px" height="400px">
<img class="slide" src="images/photos8.jpg" width="600px" height="400px">
<img class="slide" src="images/photos9.jpg" width="600px" height="400px">
<img class="slide" src="images/photos10.jpg" width="600px" height="400px">
<img class="slide" src="images/photos11.jpg" width="600px" height="400px">
<img class="slide" src="images/photos12.jpg" width="600px" height="400px">
<img class="slide" src="images/photos13.jpg" width="600px" height="400px">
<img class="slide" src="images/photos14.jpg" width="600px" height="400px">
<img class="slide" src="images/photos15.jpg" width="600px" height="400px">
<img class="slide" src="images/photos16.jpg" width="600px" height="400px">
<img class="slide" src="images/photos17.jpg" width="600px" height="400px">
<img class="slide" src="images/photos18.jpg" width="600px" height="400px">
<img class="slide" src="images/photos19.jpg" width="600px" height="400px">
<img class="slide" src="images/photos20.jpg" width="600px" height="400px">
<img class="slide" src="images/photos21.jpg" width="600px" height="400px">
<img class="slide" src="images/photos22.jpg" width="600px" height="400px">
<img class="slide" src="images/photos23.jpg" width="600px" height="400px">
<img class="slide" src="images/photos24.jpg" width="600px" height="400px">
<img class="slide" src="images/photos25.jpg" width="600px" height="400px">
<img class="slide" src="images/photos26.jpg" width="600px" height="400px">
<img class="slide" src="images/photos27.jpg" width="600px" height="400px">
<img class="slide" src="images/photos28.jpg" width="600px" height="400px">
<img class="slide" src="images/photos29.jpg" width="600px" height="400px">
<img class="slide" src="images/photos30.jpg" width="600px" height="400px">
</div>

[mhgenterprises]

anyone?