JavaScripti slaidiseanss koos CSS-iga

• Aprill 23, 2024

Eelmises artiklis lõime väga lihtsa JavaScripti slaidiseansi. See slaidiseanss on täiesti funktsionaalne ja kuvab isegi midagi sobivat inimestele, kellel pole JavaScripti, kuid sellel pole päris kõiki funktsioone, mida ma oma veebisaidi jaoks sooviksin. Eelkõige sooviksin, et praegu kuvatava pildi pisipilt näeks teistest pisipiltidest kuidagi erinev. Kuna stiilid on selle saavutamiseks hea viis, alustan konverteerides kõik minu olemasoleva HTML-i atribuudid CSS-i.

Esmalt teisendasin oma olemasoleva stiili CSS-i kasutamiseks. Kui te pole CSS-iga tuttav, on kõige lihtsam viis sellega katsetama hakata selle vahele panema stiil sildid teie HTML-dokumendi päises. Esialgne silt vajab tüübi atribuuti, et öelda brauserile, millist tüüpi stiiliteavet kasutate, nii et see peaks välja nägema järgmine:



Esialgne CSS-i teisendamine oli lihtne, kuna ainult suurel pildil oli stiiliteave ja sellel juba oli id atribuut, mida kasutati JavaScripti eesmärkidel.

#largeImage {
ääris: 2xx must must;
laius: 544 pikslit;
kõrgus: 408px;
}

Ma ei olnud varem lisanud pisipiltide suuruse teavet, kuid lisasin klassi nimega pöidlad ja määrake selle klassi pildisildid, et suurus oleks 40xx40x. See tähendab, et isegi kui laadin kogemata pisipiltide jaoks liiga suured või väikesed pildid, on nad sunnitud kuvama pisipiltidena.

img.thumbs {
ääris: puudub;
laius: 40 pikslit;
kõrgus: 40 pikslit;
}

Lisasin ka a slaidiseanss klass kogu slaidiseansi hoidmiseks. See võimaldab mul teha asju, näiteks lisada ääriseid või muuta soovi korral kogu slaidiseansi taustavärvi. Praegu kasutan seda ainult maksimaalse kõrguse seadmiseks vastavalt suure pildi kõrgusele, sest kui lisan veel pisipilte, soovin, et nad jääksid suure pildi küljele, selle asemel, et sellest kõrgemale liikuda. Kahjuks ei toeta Internet Explorer atribuuti max-height, nii et pean selle probleemiga hiljem veel põhjalikumalt tegelema.

.slaidiseanss {
kõrgus: 408px;
maksimaalne kõrgus: 408 pikslit;
}

Lõpuks lõin valitud pisipildi jaoks stiili. Otsustasin, et tahan, et minu valitud pisipilt oleks poolläbipaistev ja kitsa punase äärega. Kuna korraga valitakse ainult üks pilt, otsustasin kasutada selle jaoks id, mida nimetatakse praeguseks. CSS-i kasutamise eeliseks on see, et saan seda igal ajal muuta, ilma koodi muutmata. Stiil näeb välja selline:

img # praegune {
ääris: 1 px tahke punane;
filter: alfa (läbipaistmatus = 50);
-moz-läbipaistmatus: 0,5;
läbipaistmatus: 0,5;
}

Siin näeme mõnda koodi brauserierinevuste uuesti käsitlemiseks, standard nõuab läbipaistmatuse elemendi kasutamist, kuid nii IE kui ka Mozilla põhised brauserid seda veel ei toeta.

Lõpuks muutsin pisipiltide HTML-i, et kasutada stiile ja helistada oma funktsioonile. Minu slaidiseansi HTML näeb nüüd välja selline:









Me ei ole oma JavaScripti muutnud, nii et slaidiseanss töötab endiselt, kuid nüüd on meil rohkem stiili ja meie esitlus on eraldatud meie HTMList ja JavaScriptist. Kuid meil on üks probleem, kuigi algselt valitud pisipilt on poolläbipaistva ja punase äärega, kuid see jääb piltide muutmisel selliseks. Selle parandamiseks peame pöörduma tagasi oma vana sõbra JavaScripti juurde.

Senist toimivat koodi näete siit.

Video Juhiseid: Web Programming - Computer Science for Business Leaders 2016 (Aprill 2024).