Nopea toiminta Kuvagalleria uusille browsers

inulla on HTML -painiketta koodin. Se on onclick tapahtuma, joka kutsuu funktiota, nextSet (). Tämä JavaScript-toiminto kopioi seuraava sarja kuvia, joiden URL ovat nyt array, kuvaan tunnisteet toisen table.The Tyyli SheetThis on yksinkertainen tyylisivu: Ensimmäinen toteamus tyylisivun käsittelee pieniä kuvia, jotka ovat luokka, pieni. Toinen lausuma koskee yhden suurennettu kuva. Tämä kuva on luokka, suuri. Ilmoitus lohko Ensimmäisessä lausumassa on vain leveys arvo pieniä kuvia. Ilmoitus lohkoon suuri kuva on myös vain leveys arvo suuri kuva.

Aina, annat leveys arvon HTML-elementti selain antaa vastaava tai sopivalle korkeudelle. Välttää antamasta korkeus arvot HTML-elementit; tämä vaikeuttaa selain esitys nykypäivän browsers.The JavaScriptThis on käsikirjoitus: var sov = new Array; toimiakseen fillArray () {var aihe = document.getElementById ('O1'). arkisto; sov = subject.match (/\\ S + /g); } Toiminto suuremmaksi (tapahtuma) {document.getElementById (I0). Src = event.target.src; } Var nextIndex = 5; toiminto nextSet () {document.getElementById ('IS0 "). src = sov [nextIndex + 0]; document.getElementById ('IS1 ").

src = sov [nextIndex + 1]; document.getElementById ('IS2 "). src = sov [nextIndex + 2]; document.getElementById ('IS3 "). src = sov [nextIndex + 3]; document.getElementById ('IS4 "). src = sov [nextIndex + 4]; //Tee suurennettu kuva ensimmäinen sarjassa. document.getElementById (I0). src = sov [nextIndex + 0]; nextIndex = nextIndex + 5, jos (nextIndex == 15) {nextIndex = 0; document.getElementById (B1 ') = "ensimmäinen sarja"} else document.getElementById (B1') = "Seuraava Set"} on kolme toimintoja JavaScript.

Ensimmäinen on fillArray (), joka kopioi luettelon tilaa erotettu kuvan URL-objektin arkistomäärite taulukkoon. Tätä toimintoa kutsutaan, elimistöön lataustapahtuman yhteydessä. Toinen on suuremmaksi (tapahtuma) funktio. Tämä toiminto suurentaa pienen kuvan, kun se napsautetaan. Viimeinen toiminto on nextSet () funktio. Tämä toiminto korvaa joukko pieniä kuvien seuraava joukko. On kaksi globaaleja muuttujia, sov ja nextIndex. sovitus on käyttää ensimmäisen ja kolmannen toimintoja. nextIndex käytetään vain kolmannessa function.

Function DetailsThe fillArray () toiminto nimeltään elimistöön lataustapahtuman yhteydessä on kaksi julkilausumaa. Ensimmäinen kopioi kohteen arvo n arkistomäärite jonona muuttujaan, aihe. Toisessa lausumassa käyttää säännöllinen lauseke tekniikkaa erottaa URL-merkkijono ja asettaa niitä yksittäisiä osia globaaliss