SUBSCRIBE TO RSS FEEDShow to create a simple automatic image rotator using jQuery
I’ll explain a simple way to create an automatic image rotator using jQuery. First have a look at the demo page (opens in a new tab) to understand what we’re trying to accomplish. You can also download the tutorial’s source code.
In the example, the initial image will be displayed on the left of a paragraph containing some sample text:
<div id="test"> <img id="myImage" src="test1.png" alt="image test" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div>
First, we have to store the filenames of our images in an array. We also have to initialise a counter.
var images = new Array ('test1.png', 'test2.png', 'test3.png');
var index = 1;
The next step is to create the function which will rotate the images. We’ll call it rotateImage(). At the beginning, the currently displayed image fades out. Then, we load the next image from the images array (the counter we introduced before is being used here) and we fade it in. At the end of the function, we deal with the counter (either increment it, or reset it if all the imaged were displayed).
function rotateImage()
{
$('#myImage').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
The last step is to call the rotateImage function repeatedly inside the $(document).ready function using setInterval. In the example, the function rotateImage() is being executed every 2.5 seconds (2500 milliseconds).
$(document).ready(function()
{
setInterval (rotateImage, 2500);
});
The complete JavaScript code:
var images = new Array ('test1.png', 'test2.png', 'test3.png');
var index = 1;
function rotateImage()
{
$('#myImage').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 2500);
});
HTML:
<div id="test"> <img id="myImage" src="test1.png" alt="image test" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div>
If you haven’t done it already, have a look at the demo page (opens in a new tab). You can also download the tutorial’s source code.
I will use it in my current site, thx.
great, i thought it would be easy to code. it took me hours to find the right sample rotator code.
thanks for it. tested, worked like a charm! now gonna implement it to my other website
just one question, anyway i can link the image rotated to a specific ahref tag ? tq
Thank You for posting this. It took me a long time to find a simple, yet effective image rotator that didn’t involve alot of tweaking.
One thing I’ve noticed is that when the images are first going through the rotation, it will repeat the previous image before displaying the image.
For example, lets say I have three images (Image1.jpg, Image2.jpg and Image3.jpg) and a transition set to 6 seconds (6000).
Image1.jpg will display and hold for 6 seconds and fade out to display Image2.jpg. Right before Image2.jpg displays, Image1.jpg will display again quickly and then Image2.jpg will display and hold for 6 seconds. Also, right before Image3.jpg displays, Image2.jpg will display again quickly and then Image3.jpg will display and hold for 6 seconds. This only seems to happen during the first cycle but afterwards it works just fine. I have gotten this to occur in IE 8, FF 4 and Chrome. Any help you could give me would be appreciated!
Thanks a lot for this I will use this in ceptsolutions.com …. I really appreciate
A question from warren (via e-mail):
“Is there any way for the image rotater to only display the images once and then stay on the last image instead of continuous looping?”
A solution of the top of my head would be to add a boolean variable at the beginning of the script and then modify the rotateImage() function to change this variable to false when the array of images reaches the end, adding an if statement to make sure it will only perform the rotation when the variable is true:
var rotate = true;function rotateImage() {
if(rotate) {
...
if (index == images.length-1) {
rotate = false;
}
...
}
}
Thnx!
Hi burnmind,
It is very useful for me!
Thanks to burnmind.
Regards,
saravanan.chandrasek
I have implemented this on my site which is great. My only concern is that when i scroll down the page, when it loads the next image, the page jumps to where the images are. Do you know why or for a solution?
Thanks!
GREAT WORK BTW!!!
Hello Graham,
You can do the following:
Place the image into a div and give it a class called “image-holder”. Then, style the class like that (you can also remove the float & margin from the styling of the img tag):
.image-holder
{
width: 150px;
height: 150px;
float: left;
margin-right: 10px;
}
That will fix your issue.