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:
Luego en la etiqueta body pongo <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>
Código HTML:
<body onLoad="rotar_imagen();"> Código HTML:
<div id="imagen1"> <img id="rotativo1" ></div>
Muchas gracias, un saludo.
