A korábbi cikkekben nagyon egyszerű JavaScript diavetítésen készítettünk és finomhangoltunk. Ez a diavetítés teljesen működőképes, és még azok számára is megjelenít valamit, akik nem rendelkeznek JavaScript-kel, de szeretném, ha a jelenlegi kép miniatűrje másképp nézzen, mint a többi bélyegkép. Úgy döntöttem, hogy egy "aktuális" nevű CSS azonosítót használtam, amely félig átlátszóvá tette a képeket, és vékony piros szegélyt adott a kiválasztott indexképhez. Az utolsó cikkben megszereztem ezt a viselkedést az eredetileg kiválasztott miniatűr számára, de amikor új miniatűröt választottam, az új miniatűr nem változott, és a kezdeti miniatűr megtartotta a kiválasztott stílust.

A diavetítés előző verziójában, amikor a felhasználó egy miniatűrre kattint, a kapcsolódó nagy képek jelennek meg. Azt akarom, hogy megváltoztassa a nagy képet, állítsa be az előzőleg kiválasztott kép bélyegképét, hogy visszatérjen a normál állapotba, és készítse el ezt a bélyegképet a kiválasztott kép különleges stílusával. Mivel most már több dolgot csinálok, amikor a miniatűrre kattintanak, átváltottam az összes kódom beillesztéséről a img címke egy funkció használatához. A JavaScript funkciók általában a fej szakaszában, így betöltődnek és készen állnak az oldal törzsének betöltésekor. Vagy közvetlenül beilleszthetők között forgatókönyv címkék vagy put és egy fájl, és mellékelve. Rövid műsorok esetén, vagy amikor aktívan kódolok, könnyebb a kódomat közvetlenül az oldalra tenni, mint itt.

Használhattam volna egy funkciót mindegyik miniatűr számára, de mivel mindegyik miniatűrről miniatűrre változik, a kép neve és a miniatűr azonosítója (és a kép nevét használtam az azonosítóhoz), egyetlen függvényt írtam, amely a id mint argumentum, és ezzel a ".jpg" hozzáadásával hozta létre a megfelelő képnevet. Meghívtam a funkcióm displayLarge.

function displayLarge (id) {
// változtassa meg a nagy képet
imageName = id + ".jpg";
document.getElementById ( "largeImage"). src = ImageName;
// állítsa vissza az előző miniatűr stílusát az alapértelmezettre
document.getElementById ( "aktuális"). id = oldid;
// jegyezze fel az azonosítót, mielőtt megváltoztatnánk
oldid = ID
// jelölje meg a miniatűr aktuálisként az aktuális stílust
document.getElementById (id) .id = "aktuális";
}


Annak érdekében, hogy ez a funkció először működjön, a kezdeti meghatározást is meg kellett adnom oldid, a változó, amellyel emlékszem a jelenleg kiválasztott bélyegkép eredeti azonosítójára. Ez a kód a weboldal fejrészébe kerül, tehát az az oldal betöltése előtt kerül betöltésre.

Végül megváltoztattam a bélyegképek HTML-jét, hogy meghívjam a funkciómat. A diavetítésem HTML most így néz ki:




Kutya bélyegképe EARTH matricával
Laptop miniatűr EARTH matricával

A kiválasztott miniatűr nagyobb verziója



Itt láthatja a kód működő példáját.



Video Utasításokat: Exploring JavaScript and the Web Audio API by Sam Green and Hugh Zabriskie (December 2021).