Динамически меняющиеся изображения в div

Question

У меня есть пять изображений и вы хотите отображать их в одном div один за другим с интервалом в 2 секунды. Может кто-нибудь предложить любое решение для этого?

Answer 1

Простой Javascript пример:

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); 

Он ожидает, что вы есть некоторые HTML, как это:

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

Answer 2

Jquery Cycle действительно гибкий ... вы могли бы подключить его к тому, что вы уже отметили довольно легко.

Answer 3

Есть много способов сделать это в наше время, но один простой путь, используя следующий JQuery плагин :

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

Вот простая демонстрация в действии, затухающие изображения один за другим.

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

Answer 4

setTimeout

Вы можете сделать что-то вроде этого.

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

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

Я предполагаю, что все изображения внутри, что Див уже и есть стиль display:none