„JavaScript“ skaidrių demonstracija su funkcijomis

• Balandis 26, 2024

Ankstesniuose straipsniuose mes sukūrėme ir patobulinome labai paprastą „JavaScript“ skaidrių demonstraciją. Šis skaidrių demonstravimas yra visiškai funkcionuojantis ir netgi rodo kažką tinkamo žmonėms, kurie neturi „JavaScript“, tačiau norėčiau, kad dabar rodomo paveikslėlio miniatiūra atrodytų kitaip nei kitos miniatiūros. Aš nusprendžiau naudoti CSS id, vadinamą „current“, kuris padarė vaizdus pusiau permatomus ir prie pasirinktos miniatiūros pridėjo ploną raudoną kraštą. Savo paskutiniame straipsnyje aš gavau tokį elgesį su iš pradžių pasirinkta miniatiūra, tačiau kai pasirinkau naują miniatiūrą, nauja miniatiūra nepasikeitė, o pradinė miniatiūra išlaikė pasirinktą stilių.

Ankstesnėje mano skaidrių demonstracijos versijoje, kai vartotojas spustelėja miniatiūrą, rodomi susiję dideli vaizdai. Aš noriu, kad tai pakeistų didelį vaizdą, nustatykite anksčiau pasirinkto paveikslėlio miniatiūrą, kad ji grįžtų į normalią, ir padarykite šios miniatiūros ekraną specialiu pasirinkto vaizdo stiliumi. Kadangi dabar darau kelis veiksmus, kai spustelėjama miniatiūra, aš perėjau nuo to, kad visą savo kodą įdėčiau į „onClick“ atributą. img pažymėti funkciją. „JavaScript“ funkcijos paprastai vykdomos galva HTML skiltį, kad jie būtų įkelti ir paruošti įkeliant puslapio pagrindą. Juos galima įterpti tiesiai tarp scenarijus etiketes ar įdėkite ir failą bei įtrauktą. Trumposioms programoms arba kai aš aktyviai koduoju, man lengviau įdėti savo kodą tiesiai į puslapį, kaip tai padariau aš.

Aš galėčiau naudoti funkciją kiekvienai miniatiūrai, bet kadangi viskas, kas keičiama iš miniatiūros į miniatiūrą, yra paveikslėlio pavadinimas ir miniatiūros ID (aš id naudojau vaizdo pavadinimą), aš parašiau vieną funkciją, kuri paėmė id kaip argumentą ir panaudojo jį tinkamam vaizdo pavadinimui sukurti, pridėdamas prie jo „.jpg“. Aš pavadinau savo funkciją displayLarge.

funkcijos rodymasDidelis (ID) {
// pakeiskite didelį vaizdą
imageName = id + ".jpg";
document.getElementById („largeImage“). src = imageName;
// nustatykite ankstesnės miniatiūros stilių į numatytąjį
document.getElementById („current“). id = oldID;
// atkreipkite dėmesį į ID, prieš jį pakeisdami
oldID = id
// pažymėkite miniatiūrą kaip dabartinę dabartiniu stiliumi
document.getElementById (id) .id = "dabartinis";
}

Kad ši funkcija veiktų pirmą kartą, aš taip pat turėjau pateikti pradinį apibrėžimą senasID, kintamasis, kurį naudoju, kad atsimenu pradinį pasirinktos miniatiūros ID. Visas šis kodas yra pagrindinėje tinklalapio dalyje, taigi jis įkeliamas prieš įkeliant puslapį.

Galiausiai pakeičiau miniatiūrų HTML kodą, kad jis pavadintų mano funkciją. Dabar mano skaidrių demonstravimo HTML atrodo taip:











Darbinį šio kodo pavyzdį galite pamatyti čia.

Vaizdo Instrukcijos: Web Programming - Computer Science for Business Leaders 2016 (Balandis 2024).