Rotazione banner temporizzati - inserimento multiplo nella stessa pagina html

Barbara72

Nuovo Utente
6 Set 2011
14
0
0
Ciao a tutti,

sono nuova del forum, spero potrete darmi una mano...

Ho letto il tutorial di Luca Ruggiero (Rotazione banner temporizzati in Javascript) e l'ho utilizzato in un mio sito (bello).

Il problema è che ora vorrei richiamare la funzione più volte nella stessa pagina, ovvero vorrei fare una fila di banner (uno sotto l'altro) e vorrei che su ogni fila girassero 3 banner, nella fila sotto altri 3 e così via.

Ho provato a cambiare l'id banner con banner2 ma non funziona anzi, mi compromette il funzionamento anche dei primi 3.

Come posso fare?

Vi sarei veramente grata se riusciste a darmi una mano.

Barbara
 

Barbara72

Nuovo Utente
6 Set 2011
14
0
0
Grazie per la risposta tempestiva...
ecco il codice:

Codice:
var imm = new Array();
imm[0] = "imgs/banner1.jpg";
imm[1] = "imgs/banner2.jpg";
imm[2] = "imgs/banner3.gif";

var lnk = new Array();
lnk[0] = "http://www.banner1.it/";
lnk[1] = "http://www.banner2.it./";
lnk[2] = "http://www.banner3.it/";

var x = 0;

var mostra = document.getElementById("banner");

function mostra_banner()
{
    mostra.innerHTML = "<a href='" + lnk[x]  + "'target='_blank'><img border='0' src='" + imm[x] + "'></a>";
    window.setTimeout("mostra_banner()", 4000);
    imm.length - 1 == x ? x = 0 : x++;
}
E QUESTO FUNZIONA!
Per replicare un'altra rotazione con immagini differenti, ho creato un file banner2.js e questo è il codice:

Codice:
var imm2 = new Array();
imm2[0] = "imgs/banner1.jpg";
imm2[1] = "imgs/banner2.jpg";
imm2[2] = "imgs/banner3.gif";

var lnk2 = new Array();
lnk2[0] = "http://www.banner1.it/";
lnk2[1] = "http://www.banner2.it./";
lnk2[2] = "http://www.banner3.it/";

var x = 0;

var mostra = document.getElementById("banner2");

function mostra_banner2()
{
    mostra.innerHTML = "<a href='" + lnk2[x]  + "'target='_blank'><img border='0' src='" + imm2[x] + "'></a>";
    window.setTimeout("mostra_banner2()", 4000);
    imm.length - 1 == x ? x = 0 : x++;
}
COLLEGO POI IL TUTTO COSì:

HTML:
<tr><td><div id="banner"><script type="text/javascript" src="banner.js"></script></div>
</td></tr>

<tr><td><div id="banner2"><script type="text/javascript" src="banner2.js"></script></div>
</td></tr>
Purtroppo una volta collegato il file banner2.js non funziona più il primo.
Spero di essere stata abbastanza chiara.
Grazie per l'aiuto
Barbara
 
Ultima modifica di un moderatore:

Barbara72

Nuovo Utente
6 Set 2011
14
0
0
Ciao e grazie,

purtroppo non funziona ancora, si crea un conflitto tra le immagini. Si vede solo il banner e non il banner2 sotto. Alcune immagini non si vedono, altre si.

Ho corretto così il body:<body onload="mostra_banner(); mostra_banner2();">

Se però metto il tag *script* all'interno dell'*head* non si visualizza più la cella del banner, ho dovuto riportarlo dunque all'interno del *div*.

Hai qualche idea del perchè?

Grazie

Barbara
 

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
22
Roma
alessandro1997.netsons.org
Forse ho capito. Modifica il secondo script così:
Codice:
var imm2 = new Array();
imm2[0] = "imgs/banner1.jpg";
imm2[1] = "imgs/banner2.jpg";
imm2[2] = "imgs/banner3.gif";

var lnk2 = new Array();
lnk2[0] = "http://www.banner1.it/";
lnk2[1] = "http://www.banner2.it./";
lnk2[2] = "http://www.banner3.it/";

var x2 = 0;

var mostra2 = document.getElementById("banner2");

function mostra_banner2()
{
    mostra2.innerHTML = "<a href='" + lnk2[x2]  + "'target='_blank'><img border='0' src='" + imm2[x2] + "'></a>";
    window.setTimeout("mostra_banner2()", 4000);
    imm.length - 1 == x2 ? x2 = 0 : x2++;
}
Fammi sapere.
 

Barbara72

Nuovo Utente
6 Set 2011
14
0
0
grazie Alessandro,
sono fuori ufficio, provo questa sera e ti faccio sapere.
Grazie ancora.
Barbara