Slideshow en Javascript

creacion_grafica · #1 (**permalink**) 06/01/2014, 23:29

¡Hola comunidad de Foros del Web! ¿Alguna sugerencia para crear 3 slideshows de 3 fotos diferentes (foto_casa_01.jpg, foto_coche_01.jpg, foto_perro_01.jpg) cada una con con 4 transiciones?

Este es el código para 1 solo slideshow (foto_casa_01.jpg) pero no para los 3:

<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/foto_casa_01.jpg"
var image2 = new Image()
image2.src = "images/foto_casa_02.jpg"
var image3 = new Image()
image3.src = "images/foto_casa_03.jpg"
var image4 = new Image()
image4.src = "images/foto_casa_04.jpg"

</script>
</head>

<body>
<p><img src="images/foto_casa_01.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
</body>

¿Cómo añadir el código para los slideshows de foto_coche_01.jpg y foto_perro_01.jpg (uno debajo del otro en la misma pagina.html)?

Muchas gracias!

Alexis88 · #2 (**permalink**) 07/01/2014, 01:58

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:

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

Código CSS:

Ver originalimg{
    display: none;
}

Código Javascript:

Ver originalvar 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

creacion_grafica · #3 (**permalink**) 07/01/2014, 15:23

Gracias por responder Alexis. Este código es sólo para un slideshow ¿cierto? imagen1.jpg, imagen2.jpg, etc.

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

La idea es tener varios slideshow en la misma página cada uno con sus imágenes propias.

2. ¿El CSS va dentro de {head}?

Alexis88 · #4 (**permalink**) 07/01/2014, 18:43

Cita:

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.

Cita:

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:

Ver original<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:

Ver original.slider img{
  display: none;
}

Código Javascript:

Ver originalvar 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.

Cita:

Iniciado por creacion_grafica

¿El CSS va dentro de {head}?

Claro, puedes escribirlo directamente:

Código HTML:

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

O incluirlo de forma externa:

Código HTML:

Ver original<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

creacion_grafica · #5 (**permalink**) 08/01/2014, 21:30

¡Funcionó muy bien! Gracias de nuevo Alexis.

Una última pregunta.. Ahora tengo 3 slideshows difts en misma página html. ¿Hay algún código para que los sliders 2 y 3 (fotos_mid_01.jpg, fotos_down_01.jpg) se retrasen 1000 y 2000 respectivamente al iniciar para que no cambien los 3 sliders al mismo tiempo en el 3000? ¡Yo sé que son una misma clase de slider ahora!

Ví en un foro estos ejemplos pero no tengo idea cómo incorporarlos al código:

setTimeout(function() { your_func(); }, 5000);
Y este otro:

setTimeout(your_func, 5000);

Mi código está así:

<section class = "slider">
<img src="imgs/fotos_up_01.jpg" width="243" height="184" border="0" align="top" />
<img src="imgs/fotos_up_02.jpg" width="243" height="184" border="0" align="top" />
<img src="imgs/fotos_up_03.jpg" width="243" height="184" border="0" align="top" />
</section>

<section class = "slider">
<img src="imgs/fotos_mid_01.jpg" width="243" height="184" border="0" align="top" />
<img src="imgs/fotos_mid_02.jpg" width="243" height="184" border="0" align="top" />
<img src="imgs/fotos_mid_03.jpg" width="243" height="184" border="0" align="top" />
</section>

<section class = "slider">
<img src="imgs/fotos_down_01.jpg" width="243" height="184" border="0" align="top" />
<img src="imgs/fotos_down_02.jpg" width="243" height="184" border="0" align="top" />
<img src="imgs/fotos_down_03.jpg" width="243" height="184" border="0" align="top" />
</section>

<script type="text/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);
}
</script>

Saludos

Alexis88 · #6 (**permalink**) 08/01/2014, 23:23

Puedes hacer que varíe el tiempo de transición por cada slider afectando el tiempo de control en setInterval.

Código Javascript:

Ver originalvar 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 * (indice + 1));
  })(i);  
}

Como verás, multiplico los 3000 milisegundos por el valor del índice (número de slider con respecto a los demás) más uno, eso hará que el primero se ejecute a los 3000 milisegundos, el segundo a los 6000 y el tercero a los 9000. Puedes cambiar los 3000 milisegundos por otra cifra para que la transición de los últimos sliders no demore tanto.

Saludos

creacion_grafica · #7 (**permalink**) 09/01/2014, 12:41

Hice pruebas y estamos cerca pero: setInterval(slider.show, 3000 * (indice + 1)); hace que el primer slide aparezca más veces que el último. Por ejem 9 veces mientras el tercer slide 3 veces al verse influenciados por el indice exponencialmente.

La idea sería que los intervalos de los sliders duren lo mismo (3000) pero que el segundo slider empiece a correr en el 4000 y el tercer slider en el 5000.

Talvez la solución sea el: setTimeout(slider.show, 1000); Pero ¿cólo aplicarlo a cada slide? Ayudaa.

Gracias Alexis.

Alexis88 · #8 (**permalink**) 09/01/2014, 15:10

Una solución rápida sería hacer un bloque de código para cada slider, pero como esa no es la idea, se me ocurre que puedas hacer el control así:

Código Javascript:

Ver originalsetInterval(slider.show, 700 + ((indice + 1)/2 * 1000));

Obviamente, no es exactamente lo que pides, pero al menos le agrega dinamismo a las transiciones de cada slider sin que haya tanta diferencia de tiempo entre ellas.

Saludos

creacion_grafica · #9 (**permalink**) 10/01/2014, 16:57

Tengo que hacer mátemáticas para analizar qué pasa como resultado.. ¡pero quedó muy bien!

¡Muchas gracias Alexis por hacer a los demás lo que quisieras que hagan por ti!

creacion_grafica · #10 (**permalink**) 24/02/2014, 18:08

Hola Alexis. ¿Cómo estás? Oye.. una pregunta. ¿Algún línea de código para hacer un efecto de transición entre imgs (por ejem. tipo columnas?

Saludos.

Alexis88 · #11 (**permalink**) 24/02/2014, 18:42

No sé a qué te refiera con columnas, supongo que es al cambio de imágenes con un efecto de desplazamiento en barras, si es así, aquí puedes ver este plugin: http://www.tn3gallery.com/

Saludos