Prezentare de diapozitive JavaScript cu CSS

• Aprilie 29, 2024

Într-un articol anterior am creat o prezentare de diapozitive JavaScript foarte simplă. Această prezentare de diapozitive este complet funcțională și chiar afișează ceva potrivit pentru persoanele care nu au JavaScript, dar nu are toate funcțiile pe care mi-aș dori să le am pentru site-ul meu web. În special, aș dori ca imaginea pe care o afișează în prezent să arate într-un fel diferită de celelalte miniaturi. Deoarece stilurile sunt o modalitate bună de a realiza acest lucru, voi începe prin a converti toate atributele din HTML-ul meu în CSS.

Mai întâi am convertit stilul meu existent pentru a utiliza CSS. Dacă nu sunteți familiarizat cu CSS, cel mai simplu mod de a începe să experimentați este să îl puneți între stil etichete în capul documentului HTML. Eticheta inițială are nevoie de un atribut de tip pentru a spune browserului ce tip de informații de stil utilizați, deci ar trebui să arate astfel:



Conversia inițială în CSS a fost ușoară, deoarece doar imaginea mare a avut informații de styling și avea deja un id atribut care a fost utilizat în scopuri JavaScript.

#largeImage {
bordura: 2px negru solid;
latime: 544px;
inaltime: 408px;
}

Nu am inclus anterior informațiile de dimensionare pentru miniaturi, dar am adăugat o clasă numită degetele și setați etichetele de imagine din acea clasă pentru a seta dimensiunea la 40px cu 40px. Aceasta înseamnă că, chiar dacă încarc accidental imagini care sunt prea mari sau mici pentru miniaturi, acestea vor fi obligate să afișeze dimensiunea miniaturii.

img.thumbs {
graniță: niciuna;
latime: 40px;
inaltime: 40px;
}

Am adăugat și un prezentarea clasa pentru a ține întreaga prezentare de diapozitive. Acest lucru îmi va permite să fac lucruri precum adăugarea unui chenar sau schimbarea culorii de fundal pentru prezentarea de diapozitive întregi, dacă doresc. În acest moment, îl folosesc doar pentru a seta înălțimea maximă pe înălțimea imaginii mari, deoarece atunci când adaug mai multe miniaturi vreau să rămână pe partea imaginii mari, în loc să mă mișc deasupra ei. Din păcate, Internet Explorer nu acceptă atributul max-înălțime, așa că va trebui să lucrez la această problemă mai târziu.

.slideshow {
inaltime: 408px;
înălțime maximă: 408px;
}

În cele din urmă am creat un stil pentru miniatura selectată. Am decis că vreau ca miniatura mea selectată să fie semi-transparentă și să aibă o margine roșie îngustă. Deoarece o singură imagine va fi selectată la un moment dat, am decis să folosesc un ID numit „curent” în acest scop. Avantajul folosirii CSS este că pot schimba modul în care va arăta în orice moment fără a schimba codul. Stilul arată astfel:

img # curent {
bordură: 1px roșu solid;
Filtru: alpha (opacitatea = 50);
-moz-opacitate: 0,5;
opacitate: 0,5;
}

Aici vedem unele coduri pentru a gestiona din nou diferențele de browser, apelurile standard pentru utilizarea unui element de opacitate, dar atât browserele IE, cât și cele bazate pe Mozilla nu acceptă acest lucru încă.

În cele din urmă, am schimbat HTML-ul pentru ca miniaturile să folosească stilurile și să-mi sune funcția. HTML pentru prezentarea mea de diapozitive arată acum astfel:









Nu ne-am schimbat JavaScript, astfel încât prezentarea de diapozitive funcționează în continuare, dar acum avem mai mult stil și prezentarea noastră este separată de HTML și JavaScript. Cu toate acestea, avem o problemă, în timp ce miniatura selectată inițial este semitransparentă cu un chenar roșu, rămâne astfel când schimbăm imaginile. Pentru a remedia acest lucru, trebuie să ne întoarcem la JavaScript vechiul nostru prieten.

Puteți vedea un exemplu de lucru până acum aici.

Instrucțiuni Video,: JavaScript Random Picker Visualizer & ???? 1000 Subs Giveaway ???? (Aprilie 2024).