Hvordan lage Java Script for Pictures Looping

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>

&lt;title>Looping Images.&lt;/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.