JavaScript diavetítés CSS-sel

• Lehet 4, 2024

Egy előző cikkben egy nagyon egyszerű JavaScript diavetítést készítettünk. 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 nem rendelkezik minden olyan funkcióval, amelyet a webhelyemhez szeretnék használni. Különösen szeretném, ha a jelenleg megjelenített kép bélyegképe valamilyen módon különbözik a többi bélyegképektől. Mivel a stílusok jó módszer erre a cél elérésére, megkezdem a meglévő HTML-kódomban szereplő összes attribútum CSS-re konvertálásával.

Először átalakítottam a meglévő stílusomat CSS használatára. Ha még nem ismeri a CSS-t, akkor a legegyszerűbb módja annak kísérletezésének megkezdése, ha a között van stílus címkék a HTML-dokumentum fejében. A kezdeti címkének típusattribútumra van szüksége, hogy megmondja a böngészőnek, hogy milyen típusú stílusinformációkat használ, tehát a következőképpen kell kinéznie:



A CSS-be való kezdeti átalakítás könnyű volt, mivel csak a nagy kép rendelkezik stílusinformációkkal és már rendelkezik id attribútum, amelyet JavaScript célokra használtak.

#largeImage {
szegély: 2 képpont szilárd fekete;
szélesség: 544px;
magasság: 408px;
}

Korábban nem szerepeltem a miniatűrök méretére vonatkozó információt, de hozzáadtam egy hívott osztályt thumbs és állítson be képcímkéket abban az osztályban, hogy a méret 40xx40x legyen. Ez azt jelenti, hogy még akkor is, ha véletlenül betöltetem a képeket, amelyek túl nagyok vagy kicsik a miniatűrökhöz, kénytelenek lesznek megjeleníteni miniatűr méretben.

img.thumbs {
határ: nincs;
szélesség: 40 képpont;
magasság: 40 képpont;
}

Azt is hozzátette diavetítés osztály a teljes diavetítés megtartására. Ez lehetővé teszi számomra, hogy szegélyt adjunk hozzá, vagy megváltoztassam a teljes diavetítés háttérszínét, ha akarom. Ezen a ponton csak azt használom, hogy a maximális magasságot a nagy kép magasságához állítsam be, mert ha további miniatűröket adok hozzá, azt akarom, hogy maradjanak a nagy kép oldalán, ahelyett, hogy fölötte mozognának. Sajnos az Internet Explorer nem támogatja a max-height attribútumot, ezért később még foglalkoznom kell ezzel a kérdéssel.

.slideshow {
magasság: 408px;
maximális magasság: 408px;
}

Végül létrehoztam egy stílust a kiválasztott bélyegképhez. Úgy döntöttem, hogy azt szeretném, ha a kiválasztott miniatűr félig átlátszó lenne és keskeny piros szegéllyel rendelkezzen. Mivel egyszerre csak egy képet választunk ki, úgy döntöttem, hogy erre a célra "aktuális" nevű azonosítót használom. A CSS használatának előnye, hogy bármikor megváltoztathatom annak megjelenését, a kód megváltoztatása nélkül. A stílus így néz ki:

img # aktuális {
szegély: 1 képpont szilárd piros;
szűrő: alfa (opacitás = 50);
-moz-opacitás: 0,5;
átlátszatlanság: 0,5;
}

Itt látunk néhány kódot a böngésző különbségeinek újbóli kezelésére, a szokásos átlátszatlansági elem használatára szólít fel, de az IE és a Mozilla alapú böngészők ezt még nem támogatják.

Végül megváltoztattam a bélyegképek HTML-jét a stílusok használatához és a funkcióm meghívásához. A diavetítésem HTML most így néz ki:









Nem módosítottuk a JavaScriptet, így a diavetítés továbbra is működik, de most már több stílus van, és a bemutatót elválasztottuk a HTML-től és a JavaScript-től. Van azonban egy probléma, miközben az eredetileg kiválasztott miniatűr félig átlátszó és piros szegéllyel rendelkezik, így marad, amikor megváltoztatjuk a képeket. Ennek kijavításához vissza kell fordulnunk a régi barátunkhoz, a JavaScript-hez.

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