Create a simple automatic image switcher using jQuery

Question

Hi all. I need to create a very simple image switcher that changes my images automatically. I have the following code:

<div class="imgCarousel">
   <div class="imgC1 left"><img src="/media/1614/1_1.jpg" alt="img1" /></div>
   <div class="imgC2 left"><img src="/media/1615/2_1.jpg" alt="img2" /></div>
   <div class="imgC3 left"><img src="/media/1616/3_1.gif" alt="img3" /></div>
   <div class="imgC4 left"><img src="/media/1617/4_1.jpg" alt="img4" /></div>
   <div class="imgC5 left"><img src="/media/1618/5_1.jpg" alt="img5a" /></div>
   <div class="imgC6 left"><img src="/media/1620/6_1.jpg" alt="img6a" /></div>
   <div class="imgC7 left"><img src="/media/1622/7.jpg" alt="img7" /></div>
</div>

Two of the above images should be switched automatically after a certain amount of time (every 3-4 sec.). This means that after 4 seconds, I'd like to change the image called /media/1618/5_1.jpg with another image. And after another 4 seconds, I'd switch back again. The same shold be made for one of my other images. How can I acomplish this with some jQuery?

Answer 1

I won't code it for you... and there are so many ways to kill a dog...

give this links or jQuery methods a read...

• setInterval
• selectors
• .before()
• .after()

get some code started, then come back when have problem with the codes...

Answer 2

Hi,

Using your code as a reference, you could just use a setInterval that shows/hides the divs you want. However, there are dozens of different ways to do it.

The setInterval would be:

var loop = setInterval("nextImage()",1000);

Then nextImage() would show/hide the images, I'll use jQuery as an example:

var index = 0;
var images_size = $(".imgCarousel div").size();

function nextImage(){
// we hide all the divs and show the next one only
$(".imgCarousel div").hide();
$(".imgCarousel div").eq(index).show();
// we continue the iteration
index = index+1;
if(index >= images_size){ index = 0; }
}

This is a quick and dirty improvisation as an example but, again, there are lots of ways of doing it. You might want to check functions like load(), src() for preloads, and others like fadeIn(), fadeOut()... for smooth transition/effects.