Simple Banner Rotator with JQuery tutorial

November 10, 2011 by fMajakovskij

In this tutorial we will see how it is easy create a basic banner rotator with JQuery library.

We are making maybe the simplest rotator out there.
So let’s get started.

First off, we have to define the html of the banner:

	<div id="bannerContainer">
		<img src="images/im1.png" />
		<img src="images/im2.png" />
		<img src="images/im3.png" />
		<img src="images/im4.png" />
	</div>

Next we have to create the css rules to have our banner laying-out:

<style type="text/css">
#bannerContainer {
	width: 700px;
	height:150px;
}

#bannerContainer img {
	position: absolute;
	top: 0; left: 0;
}
</style>

So the complete html file so far should be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>title</title>

<style type="text/css">
#bannerContainer {
	width: 700px;
	height:150px;
}

#bannerContainer img {
	position: absolute;
	top: 0; left: 0;
}
</style>

<!-- we are using the latest version hosted by the jquery site -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>

<div id="bannerContainer">
	<img src="images/im1.png" />
	<img src="images/im2.png" />
	<img src="images/im3.png" />
	<img src="images/im4.png" />
</div>

</body>
</html>

Now we have to code the javascript part through JQuery, that we already imported:

<script type="text/javascript">

// we have to wait the complete window creation
$(document).ready(function() {

	// some variables to store the current image to be shown
	var currID = 0;
	var current;
	var previous;

	// set the initial opacity for all the images
	$("#bannerContainer img").css({opacity: 0});

	// store in a convenient array all the images reference
	var imgs = $("#bannerContainer img");

	// set the first step
	current = imgs[currID];
	previous = imgs[imgs.length-1];

	// this is the function that actually fade in and out the previous
	// and current image and increment our id:
	performaShowHide = function()
	{
		console.log(currID);

	    $(current).animate({
	        opacity: 1
	    }, 750 );

	    $(previous).animate({
	        opacity: 0
	    }, 750 );

		currID++;
		if(currID>=imgs.length) currID = 0;
		previous = current;
		current = imgs[currID];

	}

	// this is the interval set up to 3 seconds
	// so each 3 seconds will be a change
	play = setInterval(function(){
		performaShowHide();
		}, 3000);	

	// call the fade function for the first time only
	performaShowHide();
</script>

Now here the complete page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>title</title>

<style type="text/css">
#bannerContainer {
	width: 700px;
	height:150px;
}

#bannerContainer img {
	position: absolute;
	top: 0; left: 0;
}
</style>

<!-- we are using the latest version hosted by the jquery site -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

	var currID = 0;
	var current;
	var previous;

	$("#bannerContainer img").css({opacity: 0});

	var imgs = $("#bannerContainer img");
	current = imgs[currID];
	previous = imgs[imgs.length-1];

	performaShowHide = function()
	{
		console.log(currID);

	    $(current).animate({
	        opacity: 1
	    }, 750 );

	    $(previous).animate({
	        opacity: 0
	    }, 750 );

		currID++;
		if(currID>=imgs.length) currID = 0;
		previous = current;
		current = imgs[currID];

	}

	play = setInterval(function(){
		performaShowHide();
		}, 3000);	

	performaShowHide();
}); 

</script>

</head>
<body>

<div id="bannerContainer">
	<img src="images/im1.png" />
	<img src="images/im2.png" />
	<img src="images/im3.png" />
	<img src="images/im4.png" />
</div>

</body>
</html>