jQuery Images Crossfading Front Page Banner – Simple Stuffs

Creating a crossfading images slideshow for a homepage is easy. All you need is jQuery.

Steps as follow:

1) Assuming we have 3 images. All these images have same height and width, and positioned absolute. Each of these images are overlapping on top of each other.

<div>
	<img id="home-image-1" class="position-absolute" src="home-image-1.png"/>
	<img id="home-image-2" class="position-absolute" src="home-image-2.png"/>
	<img id="home-image-3" class="position-absolute" src="home-image-3.png"/>
</div>
.position-absolute{
	position: absolute;
}

2) Hide second and third image using jQuery hide(). Now we have only one image showing.

3) Next, we need to make the second image fading in after a certain amount of time in crossfading manner. To do this, we will set first and third images to have z-index = 0 while second image to have z-index = 1.

Note we have second image on top of all other images and it is still hidden. Call fadeIn(‘slow’) for second image.

4) Once fadeIn() animation for second image is completed, call hide() for first and third images.

5) Repeat this method for next images.

To see how to create continues looping of crossfading images, see code sample below:

<script>
	$(document).ready(function(){
		$("#home-image-2, #home-image-3").hide(); //Show first image and hide the rest.
		setInterval(function(){loopHomeImages();},5000);
	});

	var curr = 1;

	function loopHomeImages(){
		var after = (this.curr + 1)%3; //Next image in the loop
		var bef = ((curr - 1) >= 0) ? (curr - 1) : 2; //Previous image in the loop

		$(".position-absolute").css("z-index", 0);
		$("#home-image-" + curr).css("z-index", 1);
		$("#home-image-" + curr).fadeIn("slow", function(){
			$("#home-image-" + after).hide();
			$("#home-image-" + bef).hide();
		});
		curr = (curr + 1)%3;
	}
</script>

That’s all.

Good luck and have fun.

Leave a Reply

Your email address will not be published. Required fields are marked *


4 × seven =