[SOLUCIONADO] Demora en javascript

Gustavo1973 · #1 (**permalink**) 10/06/2014, 17:46

Hola, estoy haciendo un banner con imagenes que se esfuman, lo que necesito es prolongar el tiempo de transición entre el camio de imagen.
como lo puedo hacer?
Pongo el codigo

Código PHP:

  <script> 

var nimg = 0;

var imagen = ["moto01.png","moto02.png"];

function nada(i)

{

    

    document.images['img_moto'].style.opacity = 1/i;

    document.images['img_moto'].style.filter = "alpha(opacity="+100-i+")";

    //clearTimeout(0);

}

function cambia()

{    

    var i = 100;

    while(i > 1)

    {

        setTimeout("nada("+i+")", 5000); 

        i -= 10;

    }    

    document.images['img_moto'].src =  imagen[nimg];

    var i = 0;

    while(i <= 100)

    {

        

        setTimeout("nada("+i+")", 5000); 

        i += 10;

    }

    //alert(nimg);

    if(nimg == 0)

    {

        nimg++;

    }

    else

    {

        nimg = 0;

    }

    

}

 
t = setInterval('cambia()', 2500);

</script>

<body>

<img src="moto01.png" name="img_moto" border="0">

</body>

el cambio de imagen lo hace, pero quiero

Alexis88 · #2 (**permalink**) 10/06/2014, 18:45

El cambio lo tienes que hace en esta línea:

Código Javascript:

Ver originalt = setInterval('cambia()', 2500);

Ese 2500 indica que cada 2 segundos y medio se ejecutará la función cambia(). Si quieres que el intervalo sea mayor, solo aumenta la cifra. Aquí tienes otra opción para tu rotador de imágenes.

Saludos

Gustavo1973 · #3 (**permalink**) 11/06/2014, 12:36

El cambio de imagen lo hace, lo que quiero, es que en ese cambio quiero que la imagen que desaparece, lo haga desvaneciéndose lentamente.

IsaBelM · #4 (**permalink**) 11/06/2014, 13:00

ejecuta este código del aporte

Alexis88 · #5 (**permalink**) 11/06/2014, 13:30

La verdad es que noto muy ineficiente y poco práctica la forma en que haces el cambio, llamas a una función varias veces en dos loops para hacer algo que podrías hacer en menos líneas y sin utilizar tantos recursos de sistema.

Código HTML:

Ver original<img class = "ejemplo" src = "imagen1.jpg" />
<img class = "ejemplo" src = "imagen2.jpg" />
<img class = "ejemplo" src = "imagen3.jpg" />

Código Javascript:

Ver originalvar imagenes = document.getElementsByClassName("ejemplo"),
    total = imagenes.length,
    posicion = 0,
    cambiar = function (){
        imagenes[posicion].style.opacity = 0;
        posicion = posicion == total - 1 ? 0 : ++posicion;
        imagenes[posicion].style.opacity = 1;
    };
 
imagenes[posicion].style.opacity = 1;
setInterval(cambiar, 3000);

Código CSS:

Ver original.ejemplo{
    position: absolute;
    opacity: 0;
    transition: .75s;
}

En el documento, tenemos 3 elementos de imagen con la clase "ejemplo", mientras que en el código JS, tomamos a dichos elementos por su clase, obtenemos el total de elementos, declaramos un contador que empezará en cero y una función que hará el cambio de imágenes. Cuando haya cargado la ventana, se muestra a la primera imagen y con el método setInterval, ejecutaremos la función previamente creada cada 3 segundos (3000 milisegundos). En la función, ocultamos a la imagen actual y actualizamos el valor del contador; si es igual a la posición que ocupa la última imagen en el array imagenes (el total menos uno), le asignamos el valor cero para que se muestre la primera imagen, creando así un efecto de carrusel, pero si todavía no alcanza a dicho valor, incrementamos su valor en uno, mostrando así a la siguiente imagen en la secuencia. Finalmente, mostramos a la imagen que corresponda con el valor actualizado del contador.

Como veo que utilizar la propiedad filter para IE, te sugiero que adaptes ese ejemplo a lo que necesitas. Lo mismo va para el método getElementsByClassName, el cual solo tiene soporte desde IE9. Para ese caso, puedes hacer lo siguiente:

Código Javascript:

Ver originalvar elementos = document.getElementsByTagName("img"),
    total = elementos.length,
    imagenes = [];
 
for (var i = 0; i < total; i++)
    if (elementos[i].className == "ejemplo")
        imagenes.push(elementos[i]);
 
var totalImagenes = imagenes.length;

Un ejemplo en ejecución:

Nota: Hago el filtrado por la clase y no por el tipo de elemento pues pueden haber más imágenes en el documento y éstas se verían afectadas.

Saludos

Gustavo1973 · #6 (**permalink**) 11/06/2014, 14:13

El Javascript no es mi fuerte!!!
Gracias por sus ayudas!!!
Desconocía la existencia de esta aplicación.
Logre hacerlo funcionar perfectamente!!!!

Gustavo1973 · #7 (**permalink**) 11/06/2014, 14:33

Se que lo tilde como solucionado, pero no funciona en IE9.
el error esta en getElementsByTagName

Cita:

Detalles de error de página web

Agente de usuario: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; BRI/2)
Fecha: Wed, 11 Jun 2014 20:38:57 UTC

Mensaje: El objeto no acepta la propiedad o el método 'getElementsByClassName'
Línea: 17
Carácter: 1
Código: 0
URI: http://localhost/prueba/

es el error que tira IE9
en Chrome y FF funciona perfecto!!!

Alexis88 · #8 (**permalink**) 11/06/2014, 20:07

Veo que no leíste lo último que dije:

Cita:

Iniciado por Alexis88

Como veo que utilizas la propiedad filter para IE, te sugiero que adaptes ese ejemplo a lo que necesitas. Lo mismo va para el método getElementsByClassName, el cual solo tiene soporte desde IE9. Para ese caso, puedes hacer lo siguiente:

Código Javascript:

Ver originalvar elementos = document.getElementsByTagName("img"),
    total = elementos.length,
    imagenes = [];
 
for (var i = 0; i < total; i++)
    if (elementos[i].className == "ejemplo")
        imagenes.push(elementos[i]);
 
var totalImagenes = imagenes.length;

Realiza ese cambio, yo lo hice y funciona sin problemas en IE8 y 9.

Saludos

Gustavo1973 · #9 (**permalink**) 12/06/2014, 12:20

Lo hice, pero no hace el efecto de esfumado al cambiar la imagen.
No importa, en el 11 funciona y el cliente deberá actualizar para verlo bien!!!