Image Slideshow With Fading Transition

A common practice for many website's is to have a rotating graphic as part of their intro or home page. You know the one with all the happy, smiling faces and sunshine. Anyway, this script is a good alternative to a flash slideshow for your site that offers fading transitions and is cross-browser compatible. While it is more flexible as far as which and how many images you use, it is a bit more processor intensive than a flash movie would be.

I've changed the code a bit from the original version to trim it down and to keep it from displaying all the images in a non JavaScript enabled browser. Now it will only show the initial pic if Java is nixed. The original script remains pretty much intact. The original article can be found here.

The HTML

Here is the html used in this solution. Note that the style is added directly to the first image thus overriding the css below which initially hides the images inside the container. This way a user with javascript disabled will still see the initial image but of course not the additional images.

 
<div style="position:relative; ">
	<div id="imageContainer">
		<img style="display: block; opacity: 0.95;" 
		src="images/x1.jpg" />
		<img src="images/x2.jpg" />
		<img src="images/x3.jpg" />
		<img src="images/x4.jpg" />
		<img src="images/x5.jpg" />
		<img src="images/x6.jpg" />
	</div>
</div>

The CSS

Here is the css used in this example. Of course you will need to set the height and width for your solution. Also note that in the html above the imageContainer is set in a relatively positioned div to allow the absolutely positioned images to display correctly.

 
#imageContainer { height:309px; }  
#imageContainer img { display:none; 	
			position:absolute; 	
			top:0px; left:0px; 	
			height:309px;  	
			width:500px; 	
			opacity: -0.01; } 	

The JavaScript

Here is a link to the js file being used for this page. Use the interval variable, set at interval=5000 for this example, to set the desired time between new images.