Slideshow en Javascript

[Alexis88]

Iniciado por creacion_grafica

Este código es sólo para un slideshow ¿cierto?

Si te fijas bien, el slider afecta a las imágenes del contenedor especificado, por lo que solamente tendría que hacer un ligero cambio en el código para que afecte a varios contenedores al mismo tiempo.

Iniciado por creacion_grafica

¿Cómo incluir otro slideshow dentro del código (misma página html) por ejem: foto1.jpg, foto2.jpg, etc?

Reacomodando el código, quedaría así:

Código HTML:

<section class = "slider">
    <img src = "imagen1.jpg" />
    <img src = "imagen2.jpg" /> 
    <img src = "imagen3.jpg" />
</section>
 
<section class = "slider">
    <img src = "imagen4.jpg" />
    <img src = "imagen5.jpg" /> 
    <img src = "imagen6.jpg" />
</section>
 

Código CSS:

.slider img{
  display: none;
}
 

Código Javascript:

var contenedores = document.getElementsByClassName("slider")
    totalContenedores = contenedores.length;
 
for (i = 0; i < totalContenedores; i++) {
  (function(indice){  
    var imagenes = contenedores[indice].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);
  })(i);  
}
 

Como puedes notar, ahora tengo dos slider (y puedo tener muchos más si quiero), los cuales tienen la misma clase de nombre "slider", cuyas imágenes son ocultadas desde la hoja de estilos. En el código JS, tomo los elementos que tengan por clase el nombre "slider" y tomo la cantidad total de ellos (en número, que en este caso es dos pues hay dos contenedores con la clase "slider").

Con ayuda de un bucle, aplico el efecto deseado en cada imagen que se encuentre en cada contenedor, para lo cual, utilizo una función anónima auto-ejecutable, para así iniciar con el efecto del slider de forma automática y aplicar correctamente los efectos a cada imagen de cada contenedor. El resto el código sigue la misma lógica del que te mostré en la anterior respuesta, con la diferencia de que ahora trabajo con un array de contenedores, por lo que utilizo un sub-índice para acceder a ellos.

Iniciado por creacion_grafica

¿El CSS va dentro de {head}?

Claro, puedes escribirlo directamente:

Código HTML:

<style type = "text/css">
/*
    Aquí van los estilos
*/
</style>
 

O incluirlo de forma externa:

Código HTML:

<link rel = "stylesheet" type = "text/css" href = "estilos.css" />
 

En donde estilos.css, es un archivo en formato CSS que contiene los estilos.

Aquí lo tienes, en ejecución.

Saludos