Foros del Web - Ver Mensaje Individual - Acceder a los elementos Html desde Javascript

emprear · #3 (**permalink**) 19/11/2012, 16:22

En realidad no me queda claro si ese array de imágenes lo estás cargando dinamicamente a un intervalo de tiempo

Esta script combina rotación + animación

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Rotar imagen + efecto</title>
<style type='text/css'>
@-webkit-keyframes animacion_3{
0% {-webkit-opacity:0;}
100% {-webkit-opacity:100%;}
 }
@-moz-keyframes animacion_3{
0% {opacity:0;}
100% {opacity:100%;}
 }
</style>
<script type='text/javascript'>
//<![CDATA[ 
var t;
var fondos = 
[
'<img src="http://foros.emprear.com/javascript/rotar_bg/tabla_html.jpg" alt="" onload="animar(this)" width="200" height="200" \/>',
'<img src="http://foros.emprear.com/javascript/rotar_bg/sfondo05.jpg" alt="" onload="animar(this)" width="200" height="200" \/>',
'<img src="http://foros.emprear.com/javascript/rotar_bg/sfondo06.jpg" alt="" onload="animar(this)" width="200" height="200" \/>',
'<img src="http://foros.emprear.com/javascript/rotar_bg/fowd-404.jpg" alt="" onload="animar(this)" width="200" height="200" \/>'
];
var fondo_actual = 0;
// aqui hacemos la rotación
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var rotar =fondo_actual++;
document.getElementById('ani').innerHTML =  fondos[rotar];
}
 
function animar(laimagen){
laimagen.style.setProperty("-webkit-animation", "animacion_3 5s");
laimagen.style.setProperty("-moz-animation", "animacion_3 5s");
}
 
t = window.setInterval(CambiarFondo, 5000); 
 
//]]>  
</script>
</head>
<body>
<div id="ani">
<img src="http://foros.emprear.com/javascript/rotar_bg/fowd-404.jpg" width="200" height="200" alt="" onload="animar(this);" />
</div>
</body>
</html>

En efectos como este siempre es recomendable que precargues las imágenes

Saludos