[SOLUCIONADO] Rotador de imagenes en Javascript se vuelve loco

Julcar · #1 (**permalink**) 27/05/2014, 16:15

HOYGAN! ayudenmen con este codigo, es un rotador de imagenes sencillo, no quiero hacerlo muy complicado, simplemente un timer que cambie cada 10 segundos la propiedad display de una imagen, es decir que por 10 segundos este en block y de ahi pase a none y asi por los siglos de los siglos...

El codigo es este:

Código Javascript:

Ver originalfunction rotateImages()
      {
        var imageContainer = document.getElementById("slider_images");
        var imageList = imageContainer.getElementsByTagName("img");
        
        for (i = 0; i < imageList.length; i++){
          if (!imageList[i].style.display){
            imageList[i].style.display = "block";
            setTimeout(rotateImages,10000);
          }else{
            if (imageList[i].style.display == "block"){
              imageList[i].style.display = "none";
              i++;          
            }else{
              imageList[i].style.display = "block";
            }
            setTimeout(rotateImages,10000);
          }
        }
      }

Como ven es muy sencillo, a las primeras rotaciones lo hace bien, pero cuando tiene que repetir la secuencia de imagenes se vuelve loco y pone los display como le viene en gana, quiero evitar ese comportamiento y que respete la secuencia.

¿Cómo hacer?

Italico76 · #2 (**permalink**) 27/05/2014, 17:08

Empezaria mas o menos asi:

Código Javascript:

Ver original<html>
<head>
<title>Test de @Italico76</title>
<style>
    body {background-color: #000;}  
 
    #slider_images
   {
        width:350px;
        height:350px;
        background-color: #bbb;
        border: red 2px;
        position:relative;
   }
   
   img {display:none;}
   
</style>
</head>
<body>
 
<div id="slider_images">
   <img src="images/2.jpg" width="150px" height="150px"/>
   <img src="images/3.jpg" width="150px" height="150px"/>
   <img src="images/4.jpg" width="150px" height="150px"/>
   <img src="images/5.jpg" width="150px" height="150px"/>
   <img src="images/6.jpg" width="150px" height="150px"/>
</div>
 
 
<script>
    function init()
    {
        var imageContainer = document.getElementById("slider_images");
        var imageContainerChilds = imageContainer.childNodes;           
        
        var img_cont = 0;
        var img_contenedor_new = new Array;
        
        for (i = 0; i < imageContainerChilds.length; i++)
        {
            // me quedo solo con las etiquetas <img>
            if (typeof(imageContainerChilds[i].src) !='undefined')
            {
                // les asigno id para identificarlas (no se si tenian!)
                imageContainerChilds[i].id=img_cont;
                img_cont++;                 
            }
        }       
    }
      
    function rotateImages(){
        // hacer!
    }     
      
    window.onload = function()
    {
        init();
        rotateImages();
    }
</script>
</body>
</html>

Alexis88 · #3 (**permalink**) 27/05/2014, 17:12

Eso sucede porque el contador nunca retorna al principio, siempre aumenta a pesar de que haya sobrepasado la cantidad de imágenes. Este ejemplo te puede servir.

Por cierto, se escribe OIGAN y AYÚDENME.

Saludos

Italico76 · #4 (**permalink**) 27/05/2014, 17:53

@Alexis88 : compañero en JS si que ando mal

1 .- En este mismo problema no me ha funcionado lo que el amigo @lulcar ha puesto para leer todas las imagenes:

Código Javascript:

Ver originalvar imageContainer = document.getElementById("slider_images");
        var imageList = imageContainer.getElementsByTagName("img");

Cuando lo hago a mi manera es un enriedo porque entre los "childNodes" de ese contenedor hay tambien "text" y entonces hacer un filtro para las imagenes... que lio!!!!

2 .- He estado haciendo lios con los eventos ... a ver si me das una manita aqui

Julcar · #5 (**permalink**) 27/05/2014, 19:05

La cosa se me pone un poco mas facil o mas complicada segun se quiera ver..

Me toca colocar en lugar de las imagenes, divs con contenido mixto (imagenes / texto)

hago el mismo recorrido pero tengo el mismo problema, los display se asignan como le da la regalada gana al script

Alexis88 · #6 (**permalink**) 27/05/2014, 19:22

Podrías juntar la imagen y el texto que le corresponda en un <div>, repitiendo la misma operación por cada imagen y texto que tengas, luego, en lugar de iterar sobre los elementos <img>, lo harías sobre los elementos <div> y para que sea más exclusivo, coloca la misma clase a todos los <div> y los tomas por dicho dato.

Código HTML:

Ver original<div class = "slider">
    <img src = "imagen1.jpg" />
    <label>Texto 1</label>
</div>
 
<div class = "slider">
    <img src = "imagen2.jpg" />
    <label>Texto 2</label>
</div>
 
<div class = "slider">
    <img src = "imagen3.jpg" />
    <label>Texto 3</label>
</div>

Código Javascript:

Ver originalvar img = document.getElementsByClassName("slider"),
    total = img.length,
    i = 0,
    fn = function(){
        img[i].style.opacity = 0;
        i = i == total - 1 ? 0 : ++i;
        img[i].style.opacity = 1;        
    };
 
img[i].style.opacity = 1;
setInterval(fn, 4000);

No olvides aplicar estilos (CSS).

Saludos

Julcar · #7 (**permalink**) 27/05/2014, 19:25

Para ilustrarles mejor mi caso:

HTML:

Código HTML:

Ver original<div id="slider">
  <div class="wrapper">
    <div id="slider_images">
      <div id="photo-1">
        <img src="blabla" id="image-1" />
        <h4>bla bla</h4>
       </div>
       <div id="photo-2">
        <img src="blabla" id="image-2" />
        <h4>bla bla</h4>
       </div>
       <div id="photo-3">
        <img src="blabla" id="image-3" />
        <h4>bla bla</h4>
       </div>
     </div>
   </div>
</div>

Código CSS:

Ver originaldiv#slider {
  width:100%;
  background:rgb(46,46,46);
  border-bottom:5px solid rgb(1,133,230);
}
 
 
div#slider div#slider_images {
  height:270px;
  overflow:hidden;
}
 
div#slider div#slider_images div {
  height:270px;
}
 
div#slider div#slider_images div img {
  width:100%;
}
 
div#slider div#slider_images div h4 {
  position:relative;
  top:-8em;
  background:#464646;
  width:50%;
  text-align:left;
  margin-left:3em;
  padding:15px 0 15px 30px;
}
 
div#slider div#slider_images div h4 a {
  color:#FFFFFF;
  text-decoration:none;
}
 
div#slider div#slider_images div h4 a:hover {
  text-decoration:underline;
}

Y el javascript

Código Javascript:

Ver originalfunction rotateImages()
      {
        var imageContainer = document.getElementById("slider_images");
        var imageList = imageContainer.getElementsByTagName("div");
        
        for (i = 0; i < imageList.length; i++){
          if (!imageList[i].style.display){
            imageList[i].style.display = "block";
          }else{
            if (imageList[i].style.display == "block"){
              imageList[i].style.display = "none";              
            }else{
              imageList[i].style.display = "block";  
            }
            setTimeout(rotateImages,10000);
          }
        }
      }

No tengo idea de como hacer que el javascript recorra en orden los divs y aparezcan en la misma secuencia

Alexis88 · #8 (**permalink**) 27/05/2014, 19:31

Solo por curiosidad, ¿revisaste el ejemplo en el enlace que te pasé?

Julcar · #9 (**permalink**) 27/05/2014, 19:50

Cita:

Iniciado por Alexis88

Solo por curiosidad, ¿revisaste el ejemplo en el enlace que te pasé?

Lo he visto pero por motivos de compatibilidad hacia atras, para versiones antiguas de firefox, chrome, safari, IE etc, me parece que getElementsByClassName no es una opción a tomar en cuenta.

Necesito que se haga por medio de los displays, porque asi se que todos los navegadores lo soportan y se puede adaptar mejor.

Alexis88 · #10 (**permalink**) 27/05/2014, 20:00

Bueno, solamente tendrías problemas con IE desde la versión 8 hacia atrás, porque IE 9 en adelante, Chrome, Firefox, Safari y Opera, no tienen problemas ni con getElementsByClassName ni con opacity. Podrías tomar a los elementos por su clase pero de otra forma:

Código Javascript:

Ver originalvar elementos = document.getElementsByTagName("*"),
    total = elementos.length,
    slider = [];
 
for (i = 0; i < total; i++)
    if (elementos[i].className == "slider")
        slider.push(elementos[i]);

Y para la compatibilidad con la propiedad opacity, IE soporta la propiedad filter.

Saludos

Julcar · #11 (**permalink**) 28/05/2014, 13:20

Al final tuve que hacerlo a lo hardcode

Código Javascript:

Ver originalfunction rotateImages()
      {
        var imageContainer = document.getElementById("slider_images");
        var imageList = imageContainer.getElementsByTagName("div");
        
        if (!imageList[0].style.display){
          imageList[0].style.display = "block";
          imageList[1].style.display = "none";
          imageList[2].style.display = "none";
        }else{
          if (imageList[0].style.display == "block" && imageList[1].style.display == "none"){
            imageList[0].style.display = "none";
            imageList[1].style.display = "block";
            imageList[2].style.display = "none";
          }else if(imageList[1].style.display == "block" && imageList[2].style.display == "none"){
            imageList[0].style.display = "none";
            imageList[1].style.display = "none";
            imageList[2].style.display = "block";
          }else if (imageList[2].style.display == "block" && imageList[0].style.display == "none"){
            imageList[0].style.display = "block";
            imageList[1].style.display = "none";
            imageList[2].style.display = "none";
          }
        }
        setTimeout(rotateImages,5000);
      }

Dado que de momento el slider solo tendra 3 imagenes de manera continua, el codigo funciona, pero me gustaria saber si existe alguna posibilidad de adecuarlo para que trabaje de manera dinamica con 3, 4 o 5 imagenes de ser posible.

zerokilled · #12 (**permalink**) 28/05/2014, 13:38

Cita:

Iniciado por Julcar

... me gustaria saber si existe alguna posibilidad de adecuarlo para que trabaje de manera dinamica con 3, 4 o 5 imagenes de ser posible.

tal cual eso es lo que hace el código de @alexis88 en la linea 6 i = i == total - 1 ? 0 : ++i;.

Julcar · #13 (**permalink**) 28/05/2014, 14:14

Cita:

Iniciado por zerokilled

tal cual eso es lo que hace el código de @alexis88 en la linea 6 i = i == total - 1 ? 0 : ++i;.

Sorry xD yo vengo del mundillo ASP+VBScript y no se que significa

i = i == total - 1 ? 0 : ++i;

Algo lei que en C eso es un operador ternario, pero ni idea, alguien me lo puede explicar en español?

Italico76 · #14 (**permalink**) 28/05/2014, 14:24

Código Javascript:

Ver originali = i == total - 1 ? 0 : ++i;

equivale a

Código Javascript:

Ver originalif (i == total - 1)
      i = 0
else 
++i;

En PHP por ejemplo funciona exactamente igual

Código Pseudo:

Ver original(condicion a evaluar) ? (devuelve en caso de ser verdadero) : (devuelve en caso de ser falso)

Incluso en MS Excel existe pero es asi

Código Pseudo:

Ver original(condicion a evaluar , devuelve en caso de ser verdadero , devuelve en caso de ser falso)

Alexis88 · #15 (**permalink**) 28/05/2014, 15:37

Se llaman operadores ternarios y se usan en casi todos los lenguajes de programación. En cristiano, lo que está a la izquierda del signo de interrogación, es la condición, lo que está a la izquierda de los dos puntos es lo que se ejecuta cuando la condición se cumpla y lo que está a la derecha de los puntos, lo que se ejecuta cuando la condición no se cumpla.

Saludos

Julcar · #16 (**permalink**) 28/05/2014, 17:14

Cita:

Iniciado por Alexis88

Se llaman operadores ternarios y se usan en casi todos los lenguajes de programación. En cristiano, lo que está a la izquierda del signo de interrogación, es la condición, lo que está a la izquierda de los dos puntos es lo que se ejecuta cuando la condición se cumpla y lo que está a la derecha de los puntos, lo que se ejecuta cuando la condición no se cumpla.

Saludos

ah ya decia yo, en BASIC no tenemos esas cosas

Segun como me lo explicó @Italico76 se entiende mejor, ya que estoy acostumbrado al comun y corriente if(condicion){ejecucion}

Gracias por los consejos, de momento funciona, lo que me da tiempo para mejorar el script.