Create a simple automatic image switcher using jQuery

Posted by Kim Andersen on Stack Overflow See other posts from Stack Overflow or by Kim Andersen
Published on 2010-06-10T07:32:55Z Indexed on 2010/06/10 7:52 UTC
Read the original article Hit count: 190

Filed under:
|
|

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?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about image