Rotazione banner temporizzati - inserimento multiplo nella stessa pagina html

Barbara72 · 6 Set 2011

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

alessandro1997 · 6 Set 2011

Potresti postare il codice della pagina? Così vediamo dove hai sbagliato.

Barbara72 · 6 Set 2011

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

alessandro1997 · 6 Set 2011

Invece di scrivere il tag script all'interno del div inserisci entrambi nell'head e modifica il body così:

HTML:

<body onload="mostra_banner(); mostra_banner2();">

Barbara72 · 6 Set 2011

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 · 6 Set 2011

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 · 6 Set 2011

grazie Alessandro,
sono fuori ufficio, provo questa sera e ti faccio sapere.
Grazie ancora.
Barbara

Barbara72 · 6 Set 2011

Perfetto!!

Ti ringrazio, funziona e ho capito l'errore.

Barbara72

Cerca

Cerca

Rotazione banner temporizzati - inserimento multiplo nella stessa pagina html

Barbara72

Nuovo Utente

alessandro1997

Utente Attivo

Barbara72

Nuovo Utente

alessandro1997

Utente Attivo

Barbara72

Nuovo Utente

alessandro1997

Utente Attivo

Barbara72

Nuovo Utente

Barbara72

Nuovo Utente

Discussioni simili