Ver Mensaje Individual
  #5 (permalink)  
Antiguo 08/01/2014, 21:30
creacion_grafica
 
Fecha de Ingreso: junio-2010
Mensajes: 41
Antigüedad: 14 años, 5 meses
Puntos: 0
Pregunta Respuesta: Slideshow en Javascript

¡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