Sin usar jquery, cómo recorrer las imágenes para hacer una presentación de diapositivas simple

Question

Tiene un div, con 3 imágenes en él.

Cómo crear una presentación de diapositivas simple que recorre las imágenes, y muestra cada imagen durante 5 segundos y vuelve a la primera imagen cuando termina y continúa en bucle.

Sin usar jquery o cualquier otro marco.

Answer 1

Bueno, tendría que conseguir una manija para el <div> en primer lugar, por lo que si tiene un "id" valor:

var theDiv = document.getElementById("imgContainer"); 

Ahora sólo hay que configurar un temporizador para desplazarse por las imágenes :

(function(div, sleep) { 
    var idx = 0; 
    var imgs = div.getElementsByTagName('img'); 
    function showOne() { 
    for (var i = 0; i < imgs.length; ++i) 
     imgs[i].style.display = 'none'; 
    imgs[idx].style.display = ''; 
    idx = (idx + 1) % imgs.length; 
    setTimeout(showOne, sleep); 
    } 

    showOne(); 
})(theDiv, 5000); 

Answer 2

puede utilizar setInterval para configurar la devolución de llamada temporizada, y establecer el src de un elemento img:

window.onload = function() { 
    var slides = [ "path_to_image_one", 
        "path_to_image_two", 
        "path_to_image_three" // ... 
       ], 
     index = 0, 
     timer = 0; 

    // Show the first slide 
    showNextSlide(); 

    // Show "next" slide every five seconds 
    timer = setInterval(showNextSlide, 5000); 

    // The function we call to show the "next" slide  
    function showNextSlide() { 
     if (index >= slides.length) { 
      index = 0; 
     } 
     document.getElementById('theImage').src = slides[index++]; 
    } 
}; 

... donde su margen de beneficio para la imagen es:

<img id="theImage" src="path_to_initial_placeholder"> 

Tenga en cuenta que me he guardado el mango temporizador en timer pero no utilicé. Esto es solo porque puede usarlo para cancelar el temporizador si necesita detener la presentación de diapositivas.

Actualización: Acabo de ver que desea obtener las imágenes de un div en alguna parte (mientras que arriba he proporcionado las rutas en el código mismo). Lo suficientemente simple para crear slides dinámicamente; edición revisada de lo anterior que agarra las imágenes que son directos hijos del div con el ID "theDiv":

window.onload = function() { 
    var slides = [], 
     index = 0, 
     timer = 0, 
     node; 

    // Get the slides 
    for (node = document.getElementById('theDiv').childNodes; 
     node; 
     node = node.nextSibling) { 
     if (node.nodeType == 1 && node.tagName == "IMG") { 
      slides.push(node.src); 
     } 
    } 

    // Show the first slide 
    showNextSlide(); 

    // Show "next" slide every five seconds 
    timer = setInterval(showNextSlide, 5000); 

    // The function we call to show the "next" slide  
    function showNextSlide() { 
     if (index >= slides.length) { 
      index = 0; 
     } 
     document.getElementById('theImage').src = slides[index++]; 
    } 
}; 

Answer 3

var image = new Array('/img/1.jpg', '/img/2.jpg', '/img/3.jpg'); 

setTimeout("show_next()",5000); 

function show_next() 
{ 
var container = document.getElementById('image_container'); 
container.innerHTML = "<img src='" + image[i] + "' />"; 
if(i==2) { i = 1; }else { i = i + 1; } 
} 

Answer 4

(function() { 
    var imgs = document.getElementById('your_div').getElementsByTagName('img'), 
     index = 0; 
    imgs[0].style.display = 'block'; 
    setInterval(function() { 
     imgs[index].style.display = 'none'; 
     index = (index + 1) % imgs.length; 
     imgs[index].style.display = 'block'; 
    }, 5000); 
}()); 

Ejemplo HTML: http://jsfiddle.net/Zq7KB/1/

Editar: Vi un ejemplo más elegante que el utilizado .length.

Answer 5

Pensé que esta era una buena respuesta simple, pero había un par de errores. setInterval en lugar de setTimeout y no se estableció el índice inicial. También modifiqué para cargar la primera imagen de inmediato.

var image = new Array('imgs/18/P1050294-XL.jpg', 'imgs/18/P1050293-XL.jpg', 'imgs/18/P1040984-XL.jpg', 'imgs/18/P1040983-XL.jpg', 'imgs/18/P1040982-XL.jpg'); 

var path = 'mypath'; 

document.getElementById('slideShow').innerHTML = "<img width='600px' src='" + path + image[0] + "' />" // Load First image 
var i = 1; // Set counter to second image, for first use of loop 

setInterval("show_next(path)",5000); 

function show_next(path) 
{ 
var container = document.getElementById('slideShow'); 
container.innerHTML = "<img width='600px' src='" + path + image[i] + "' />"; 
if(i==4) { i = 0; } else { i = i + 1; } 
}