Hvordan lage Java Script for Pictures Looping
Den følgende fremgangsmåte kan brukes til å lage Java-skript for looping bilder. De som skal vises bilder er lastet inn i enkelte Document Object Model (DOM) elementer, og disse elementene har samme sted på skjermen og er skjult som standard. Hvert element blir deretter gjort synlig i sin tur i en tidsperiode måles i millisekunder. Dette er en av flere metoder som kan brukes for å sløyfe bilder ved hjelp av Java-script.
Bruksanvisning
1 Åpne din tekst editor og opprette en ny tom fil. Lagre filen som "looping.html".
2 Skriv denne HTML "head" kode i begynnelsen av filen:
<! 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>
& Lt; meta content = "text / html; charset = utf-8" http-equiv = "Content-Type" />
3 Skriv denne HTML "style" kode i filen, under "hodet" kode:
<Style type = "text / css">
#content_0,
# Content_1,
# Content_2,
# Content_3,
# content_4
{
position: absolute;
z-index: 0;
synlighet: skjult;
width: 11em;
høyde: 13em;
top: 1.0em;
venstre: 1.0em;
border: 2px solid #ccc;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
text-align: center;
padding-top: 1em;
}
</ Style>
4 Skriv denne HTML "script" kode i filen, under "stil" kode:
<Script type = "text / javascript">
var num = 0;
funksjon hideDisplay () {
document.getElementById ( "content_" + num) .style.visibility = "skjult";
if (num & lt; 4) {
num = num + 1;
}
else {
num = 0;
}
showDisplay ();
}
funksjon showDisplay () {
document.getElementById ( "content_" + num) .style.visibility = "synlig";
setTimeout ( "hideDisplay ()", 2000); // Sett tidsperioden milli sekunder her.
}
</ Script>
</ Head>
5 Skriv HTML "kroppen" kode i filen, under "script" kode:
<Body onload = "showDisplay ()">
<Div id = "content_0">
<Img />
<! - Den src banen til bilde 0 skal settes inn her. ->
</ Div>
<Div id = "content_1">
<Img />
<! - Den src banen til bilde 1 skal settes inn her. ->
</ Div>
<Div id = "content_2">
<Img />
<! - Den src banen til bilde 2 skal settes inn her. ->
</ Div>
<Div id = "content_3">
<Img />
<! - Den src banen til bilde 3 skal settes inn her. ->
</ Div>
<Div id = "content_4">
<Img />
<! - Den src banen til bilde 4 skal settes inn her. ->
</ Div>
</ Body>
</ Html>
6 Lagre filen, og deretter åpne den i en nettleser ved hjelp av "File" -menyen kommandoen.
Hint
- Merk: Du må levere dine egne bilder.