Hvordan rotere bilder i lysbildeserier med Javascript

Hvordan rotere bilder i lysbildeserier med Javascript


Javascript er ofte brukt til å produsere dynamiske effekter på websider som ikke er mulig med HTML alene. Java tilbyr deg en mye kontroll over elementene på siden din, selv etter at den er lastet. For eksempel kan du endre "src" egenskap av en "img" tag til å bytte ut et bilde på siden. Utvide denne handlingen for å lage en lysbildeserie av bilder for besøkende til ditt nettsted.

Bruksanvisning

1 Sett inn følgende Javascript-kode mellom "hodet" kodene i HTML-dokumentet:

<Script type = "text / javascript">

Var photosets = {

slideshow1: [0, [ "dog.jpg", "cat.jpg", "horse.jpg", "snake.jpg"]],

slideshow2: [0, [ "apple.jpg", "banana.jpg", "grape.jpg", "melon.jpg", "berry.jpg"]]

};

funksjons rotatePhotos (id) {

document.getElementById(id).src = photosets[id][1][photosets[id][0]];

photosets [id] [0] + = 1;

photosets [id] [0]% = photosets [id] [1] .length;

}

</ Script>

Rediger "photosets" variable erklæring for å sette lysbildeserier. Gi hver bildevisning et unikt navn (for eksempel "slideshow1", "slideshow2" osv), etterfulgt av et kolon. List filnavnene til bildene i lysbildefremvisningen i indre sett klammer, i anførselstegn og adskilt med komma. Hver lysbildeserie kan være så lenge du vil. Separate lysbildeserier med komma som vist.

2 Legg til følgende kode i kroppen av HTML-dokumentet for å plassere lysbildeserie på siden:

<Img id = "slideshow1" />

<Input type = "button" value = "Neste Bilde" onclick = "rotatePhotos ( 'slideshow1');" />

Gjenta denne koden for hver lysbildeserie du ønsker å sette på siden, endre lysbildeserien navnene i "img" og "input" koder for å angi lysbilde du ønsker.

3 Lagre siden og legg den i en nettleser. Klikk på knappen for å avansere lysbildefremvisningen. De lysbildeserier er tomme først; legge samtaler av "rotatePhotos" -funksjonen i "onLoad" egenskap av "body" tag å initial dem når siden lastes. For eksempel:

<Body onload = "rotatePhotos ( 'slideshow1'); rotatePhotos ( 'slideshow2');">