Hvordan lage en Javascript lysbildefremvisning

En Javascript lysbildefremvisning er en gruppe av koder i HTML / Javascript som lar brukeren til å klikke på "Tilbake" og "Next", mens "bla" gjennom et sett av digitale bilder. Når du vet syntaksen, er det relativt enkelt å lage en Javascript lysbildefremvisning.

Bruksanvisning

1 Se på en Javascript lysbildefremvisning prøven. Se Resources nedenfor for å koble til en lysbildeserie på Internett.

2 Start en tomt dokument i Notepad eller din valgte HTML editor. Merke opp dokumentet med grunnleggende HTML-koder som følger. Du kan skrive inn hvilken som helst tekst i tittelfeltet; denne koden vises i den blå tittellinjen øverst i nettleseren.

3 Sett opp Javascript lysbildefremvisning med under kode. imageGroup er navnet på en ny array, eller sett, bilder. Du kan velge hvilket som helst navn, ikke bare imageGroup-du må bare holde navnet på tabellen konsekvent gjennom. Ordet "Array" er en Javascript søkeord, og du kan ikke endre det; sørg for å kapitalisere på "A." Tallet ved siden av ordet "Array" i parentes er det totale antall bilder i lysbildefremvisningen. Dette lysbilde har to bilder, men din kan ha så mange bilder du vil.

imageGroup = new Array(2);

4 Knytte et bilde til hver indeksverdi på din array. I koden nedenfor, bildet i posisjon null er imageGroup [0]. Du må fortelle Javascript at gjenstanden i posisjon null er et bilde, derav den "nye Image" kode. Merk at "Image" er et nøkkelord, og må aktiveres. Den neste kodelinje forteller Java hvilket bilde fra datamaskinen din til å trekke inn i posisjon null bildeobjektet. I dette tilfellet, er navnet på bildet er "ketchikan.jpg". Merk at filnavnene er alltid store og små bokstaver.

imageGroup[0] = new Image;
imageGroup[0].src = "ketchikan.jpg";
imageGroup[1] = new Image;
imageGroup[1].src = "lumberjackketchikan.jpg";

5 Skriv inn koden under. Den "index = 0;" koden betyr at lysbildeserien skal starte på begynnelsen av tabellen. Den "-funksjonen doBack ()" code forteller Javascript for hva du skal gjøre når brukeren klikker "Tilbake" for å se tidligere bilder. Den "-funksjonen doNext ()" code forteller Javascript for hvordan de skal oppføre seg når brukeren ønsker å se neste bilde i lysbildefremvisningen. Den "document.slideshow.src" code betyr at det aktuelle dokumentet på skjermen (nettleser) bruker objektet som heter "slideshow" (beholderen for lysbildefremvisning med digitale bilder) for å gjøre denne biten av Javascript-kode arbeid.

index = 0;
function doBack()
{
if (index > 0)
{
index --;
document.slideshow.src =
imageGroup[index].src;

}
komme tilbake;
}
fungere doNext ()
{
if (index <4)
{
index ++;
document.slideshow.src =
imageGroup [index] .src;

}
komme tilbake;
}

6 Input resten av disse grunnleggende HTML-koder i dokumentet. Sett inn et bilde tag å skape stedet der ditt første bilde skal vises. Legg merke til navnet "slideshow" er det samme navnet i "document.slideshow.src" koden ovenfor. Angi høyden og bredden attributter hvis du ønsker å gjøre alle bildene i lysbildefremvisningen samme størrelse.

name = "slideshow"
width = 430
height = 300>

7 Opprette hyperkoblinger for ordene "Neste" og "Tilbake" som brukeren kan klikke. Når brukeren klikker noen av disse ordene, kaller klikking "doNext" og "doBack" funksjoner (som du setter opp tidligere) i aksjon. Lagre dokumentet som "filename.html" (uten anførselstegn, opprette ditt eget filnavn). Forhåndsvise den i en nettleser for å se det endelige produktet.
Tilbake
neste