Slideshow en Javascript

[Alexis88]

En lugar de tomar una por una las imágenes, tómalas por el tipo de elemento y las vas mostrando una por una, ocultando la actual y presentando la siguiente en un bucle infinito.

Código HTML:

<section id = "slider">
    <img src = "imagen1.jpg" />
    <img src = "imagen2.jpg" />
    <img src = "imagen3.jpg" />
</section>
 

Código CSS:

img{
    display: none;
}
 

Código Javascript:

var contenedor = document.getElementById("slider"),
    imagenes = contenedor.getElementsByTagName("img"),
    contador = 0,
    totalImagenes = imagenes.length;
 
imagenes[contador].style.display = "block";
 
var slider = {
    show: function(){
        imagenes[contador].style.display = "none";    
        contador = (contador == totalImagenes - 1) ? 0 : ++contador;    
        imagenes[contador].style.display = "block";
    }
};
 
setInterval(slider.show, 3000);
 

En el documento HTML, tengo una sección con tres imágenes (pueden haber muchas más o incluso menos), las cuales son ocultadas desde la hoja de estilos. En el documento JavaScript, tomo el contenedor de las imágenes y en él, busco a todos los elementos de imagen, además de declarar un contador que empezará con el valor cero y tomo la cantidad total de imágenes que conformarán mi slider.

Procedo a mostrar la primera imagen del array imagenes y luego, declaro al objeto slider, el cual tendrá como único método a show. En él, oculto la imagen que actualmente se está viendo y luego evalúo el valor actual del contador, si es igual a la cantidad de imágenes menos uno, es decir, si se está mostrando la última de las imágenes, le doy cero como valor, caso contrario, lo incremento en uno. Esto es para crear un bucle infinito, en el que mostraré las imágenes una a una y cuando muestre la última, regreso al inicio, mostrando nuevamente la primera. Finalmente, muestro la siguiente imagen, sea ésta la primera o la que siga en el array de imágenes.

Cuando acceda a la página, se ejecutará el método show del objeto slider, cuya ejecución controlaré con el método setInterval, el cual ejecutará el mencionado método cada 3 segundos o 3000 milisegundos.

Aquí puedes ver este ejemplo en ejecución.

Saludos