Dynamically changing images in a div

Question

I've five images and would like to display it in a same div one by one with interval of 2 sec. Can anyone please suggest any solution for this?

Answer 1

Jquery Cycle is really flexible... you could hook it up to whatever youve got already marked up pretty easily.

Answer 2

Simple javascript example:

var currentImage = 0;
var images = [
    'a.jpg',
    'b.jpg'
];
var imageElement = document.getElementById('yourImageTagId');

function nextImage(){
    currentImage = (currentImage + 1) % images.length;
    imageElement.src = images[currentImage];
}

var timeoutId = setTimeout(nextImage, 1000);

It expects you to have some html like this:

<img src="a.jpg" id="yourImageTagId" />

Answer 3

There are many ways to do this nowadays but one simple way is using the following jquery plugin:

http://jquery.malsup.com/cycle/

Here is a simple demo in action fading images one after the other.

http://jquery.malsup.com/cycle/basic.html

Answer 4

setTimeout

You can do something like this.

function selectData(currentIndex) {
    // select current's element "display" to "none" and show next element
    ...

    // schedule next change in two second        
    setTimeout("selectData(" + nextIndex + ");", 2000);
};

I assume all images are inside that div already and have style display:none