Hola, buenas a todos. Esta es la primera vez que escribo en este foro así que si incumplo alguna regla es inconscientemente y pido perdón de ante mano.
Ando iniciándome en esto del javascript y quiero hacer una cosa que creo que es bastante sencillita pero estoy muy atascado.
Mi idea es cargar imágenes en una página web con el efecto de que se disuelva la actual antes de que se cargue la siguiente. ( Cargo Imagen -> Disuelvo Imagen -> Cargo imagen -> ... )
De momento he conseguido lo de cargar imágenes, pero por más que busco lo de disolver sólo hay plugins y cosas en jquery y estoy seguro que hay algo más sencillo en javascript.
El código que tengo es:
Código:
<script>
function rotar_imagen()
{
var tiempo1 = 2500;//tiempo en milisegundos
var arrImagenes1 = ['../imagenes/1.jpg','../imagenes/11.png', '../imagenes/111.png'];
_img1 = document.getElementById('rotativo1');
//cargar la 1er imagen
_img1.src = arrImagenes1[0];
var i=1;
setInterval(function(){
_img1.src = arrImagenes1[i];
i = (i == arrImagenes1.length-1)? 0 : (i+1);
}, tiempo1);
}
</script>
Luego en la etiqueta body pongo
Código HTML:
<body onLoad="rotar_imagen();">
y en el div
Código HTML:
<div id="imagen1"> <img id="rotativo1" ></div>
Eso lo único que hace es cargar las imagenes del vector, a partir de hay.. ¿se pueden añadir dos o tres líneas que disuelvan la foto antes de cargar la siguiente?
Muchas gracias, un saludo.