Galleria di immagini su sfondo

[mb89]

Ciao a tutti.
Mi chiedevo come fosse possibile, senza implementare flash, impostare sullo sfondo dell'home uno sfondo che cambia dopo un tot di tempo.
Come in questo sito.

http://www.21adv.it/

Grazieee :-)

(Per la cronaca: uso un sistema wordpress)

P.S:
Sono nuovo, e approfitto per salutare tutti e augurarmi di poter, talvolta, essere di aiuto anch'io.

[dragon88]

Credo che quello non cambia lo sfondo della pagina, ma lo sfondo del div contenitore.


Cmq, dovresti vedere il funzionamento della funzione http://www.switchonthecode.com/tutorials/javascript-tutorial-using-setinterval-and-settimeout di javascript.

A questo punto creare una funzione per far cambiare immagine, e un'array di immagine. in questo modo:

function cangheBackground(int position) 
{
  var images = new Array();
  
  images[0] = "percorso_prima_immagine";
  images[2] = "percorso_prima_immagine";
  images[3] = "percorso_prima_immagine";

  document.body.style = "background-image:" + image[position]
  i++;
}

E potresti eseguirla con la funzione setInterval() in questo modo:

window.onload = function() 
{
  setInterval(cangheBackground(i), 2000);
}

Dovresti mettere anche, all'esterno di entrambi le funzioni, la variabile globare i valorizzata a 0.

Premetto che non l'ho provato il codice ma dovrebbe funzionare, non so se hai capito l'esempio.

[mb89]

Ti ringrazio tantissimo!
lo provo immediatamente e poi ti faccio sapere!

[dragon88]

Ho fatto un'errore nella prima funzione, ho saltato l'inizializzazione di images[1]

[mb89]

Il vero problema è che col java sono un vero e proprio novellino
mi consigli di mettere la funzione che mi hai dato in un foglio esterno e poi di richiamarla nel mio html?
io sto provando a mettere il codice che mi hai dato nell'header...

[dragon88]

Inanzi tutto scusami, ho fatto un po di errori nel codice, visto che l'ho fatto al volo, senza provarlo.

Ora ho corretto quel codice e funziona, puoi inserirlo sia esternamente che internamente alla pagina, io lo inserito internamente alla pagina, ti faccio vedere il codice:

<script type="text/javascript">
i = 0;
interval = null;
images = new Array();
  
images[0] = "1.png";
images[1] = "2.png";


 
function cangheBackground()
{
   if (i > images.length - 1) {
     i = 0;
   }
   
   document.body.background = images[i];
   i++;
}

window.onload = function()
{
   document.body.background = images[0];
   
   interval = setInterval(cangheBackground(), 2000);
}
</script>

Nel codice qui sopra, come puoi vedere, setto tre variabili globali, un'array con due elementi ( i percorsi delle immagini ), poi, al caricamento della pagina ( windows.onload = function() ), setto l'immagine iniziare al valore del primo elemento dell'array ed eseguo, tramite la funzione setInterval(), all'interno della variabile interval, la funzione cangheBackground(), eseguita ogni 200 millesecondi, secondo parametro di setInterval, cioè ogni 2 minuti.

Se vuoi interrompere l'esecuzione di setInterval() basta eseguire la funzione crealInterval()

Ovviamente questo script nel passaggio tra un'immagine e l'altra non visualizza nessun effetto di transazione, dovresti cercare meglio su internet per questo.

P.S.: Ti consiglio di studiarti meglio il javascript.

[mb89]

Funziona!!!
TI ringrazio tantissimo!
per il loop ho preferito usare
questo codice:

<script>

rotateSwitch = function(){
play = setInterval(function(){

cangheBackground();

}, 4000);
};
rotateSwitch();
</script>

Sto cominciando a capirci qualcosa

Ti ringrazio e tanti saluti!