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
