Esempio di pagina con quello che cerchi
codice:
<html>
<head>
<style type='text/css'>
#sfondoanimato{display:none; z-index:-99999; position:absolute; top:0; left:0; width:100%; height:100%;}
</style>
<script type='text/javascript' src='path/to/jquery.js'></script>
<script type='text/javascript'>
immagini = ['immagini/imm1.jpg', 'immagini/imma.gif', 'immagini/immc.png'];
$(function(){cambiasfondo();});
function cambiasfondo(){
random = Math.floor(Math.random()*immagini.length);
$("#sfondoanimato").attr("src",immagini[random]);
$("#sfondoanimato").fadeIn(2000).delay(5000).fadeOut(2000);
setTimeout("cambiasfondo()", 9000);
}
</script>
</head>
<body>
<img id='sfondoanimato' alt=''/>
</body>
</html>
Sono necessari jquery per l'effetto dissolvenza e un minimo di css per posizionare l'immagine di sfondo.
Lo script è davvero semplice, si inizializza un array con la lista dei percorsi delle immagini e si richiama a intervalli di tempo regolari una funzione che, prendendo un'immagine casuale, cambia lo sfondo con gli opportuni effetti di dissolvenza.
Per fare apparire l'immagine in 2 secondi ho usato fadeIn(2000), per farla sparire in 2 secondi fadeOut(2000), per attendere 5 secondi tra l'apparire e lo scomparire ho usato delay(5000). Visto che il tutto dura 2+5+2=9 secondi, ho fatto in modo che la funziona che cambia lo sfondo venisse chiamata ogni 9 secondi.
Rispondi quotando
