Il seguente metodo può essere utilizzato per creare script di Java per il ciclo continuo di immagini. Vengono caricate le immagini da visualizzare in elementi di singolo documento oggetto model (DOM), e questi elementi condividono la stessa posizione di schermo e sono nascoste per impostazione predefinita. Ogni elemento viene quindi reso visibile a sua volta, per un periodo di tempo misurato in millisecondi. Questo è uno dei diversi metodi che possono essere utilizzati a ciclo continuo di immagini utilizzando Java script.
Istruzioni
1
Aprite il vostro editor di testo e creare un nuovo file vuoto. Salvare il file come "looping.html".
2
Scrivere questo codice di "testa" HTML all'inizio del file:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< html xmlns =
"http://www.w3.org/1999/xhtml" >
< head >
<title>Looping Images.</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />3
Scrivere il codice di "stile" di HTML in file, sotto il codice di "testa":
< style type = "text/css" >
#content_0,
#content_1,
#content_2,
#content_3,
#content_4
{
position: absolute;
z-index: 0;
visibility: hidden;
width: 11em;
height: 13em;
top: 1.0em;
left: 1.0em;
border : 2px solid #ccc;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
text-align:center;
padding-top: 1em;
}
< / stile >
4
Scrivere codice HTML di "script" nel file, sotto il codice di "stile":
< script type = "text/javascript" >
var num = 0;
function hideDisplay() {
document.getElementById("content_" + num).style.visibility = "hidden";
if ( num < 4 ) {
num = num + 1;
}
else {
num = 0;
}
showDisplay();
}
function showDisplay() {
document.getElementById("content_" + num).style.visibility = "visible";
setTimeout("hideDisplay()",2000); // Set the time period in milli seconds here.
}
< / script >
< / head >
5
Scrivere il codice di "corpo" di HTML nel file, sotto il codice di "script":
< onload="showDisplay() del corpo" >
< div id = "content_0" >
< img / >
<!-il percorso di src all'immagine 0 deve essere inserito qui. -->
< / div >
< div id = "content_1" >
< img / >
<!-il percorso src immagine 1 deve essere inserito qui. -->
< / div >
< div id = "content_2" >
< img / >
<!-il percorso src immagine 2 deve essere inserito qui. -->
< / div >
< div id = "content_3" >
< img / >
<!-il percorso src immagine 3 deve essere inserito qui. -->
< / div >
< div id = "content_4" >
< img / >
<!-il percorso src immagine 4 deve essere inserito qui. -->
< / div >
< / body >
< / html >
6
Salvare il file, quindi aprirlo in un browser web utilizzando il comando di menu "File".
Consigli & Avvertenze
- Nota: È necessario fornire le proprie immagini.