Dynamically changing images in a div

I've fi开发者_C百科ve 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?

---

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" />

---

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

---

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

---

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