JavaScript slaidrāde ar CSS

• Maijs 15, 2024

Iepriekšējā rakstā mēs izveidojām ļoti vienkāršu JavaScript slaidrādi. Šis slaidrāde ir pilnībā funkcionējoša, un tajā ir parādīts pat kaut kas piemērots cilvēkiem, kuriem nav JavaScript, taču tam nav gluži visu iespēju, ko es vēlētos iegūt savai vietnei. Jo īpaši es vēlētos, lai mana pašlaik attēlotā attēla sīktēls kaut kā izskatās savādāk nekā citi sīktēli. Tā kā stili ir labs veids, kā to sasniegt, es sākšu ar visu atribūtu manā esošajā HTML konvertēšanu uz CSS.

Vispirms es pārveidoja savu esošo stilu, lai izmantotu CSS. Ja neesat pazīstams ar CSS, vienkāršākais veids, kā sākt eksperimentēt ar to, ir ievietot starp stils tagi HTML dokumenta galvā. Sākotnējam tagam ir nepieciešams atribūts type, lai pārlūkprogrammai pateiktu, kāda veida stila informāciju izmantojat, tāpēc tam vajadzētu izskatīties šādi:



Sākotnējā konvertēšana uz CSS bija viegla, jo tikai lielajam attēlam bija informācija par stilu un tam jau bija id atribūts, kas tika izmantots JavaScript nolūkos.

#largeImage {
apmale: 2xx melna;
platums: 544 pikseļi;
augstums: 408px;
}

Iepriekš nebiju iekļāvusi sīktēlu izmēru informāciju, bet pievienoju klasi ar nosaukumu īkšķi un šajā klasē iestatiet attēlu tagus, lai izmērs būtu 40xx40xx. Tas nozīmē, ka pat tad, ja nejauši ielādētu sīktēlu pārāk lielus vai mazus attēlus, tie būs spiesti parādīties sīktēlu formātā.

img.thumbs {
robeža: nav;
platums: 40 pikseļi;
augstums: 40 pikseļi;
}

Es arī pievienoju a slaidrāde klase, lai turētu visu slaidrādi. Tas ļaus man darīt, piemēram, pievienot apmali vai mainīt visas slaidrādes fona krāsu, ja es to vēlos. Šobrīd es to izmantoju tikai, lai maksimālo augstumu iestatītu līdz lielā attēla augstumam, jo, pievienojot vairāk sīktēlu, es vēlos, lai tie paliktu lielā attēla pusē, nevis virzītos virs tā. Diemžēl pārlūkprogramma Internet Explorer neatbalsta atribūtu maks. Augstums, tāpēc vēlāk man būs jāstrādā pie šī jautājuma vairāk.

.slideshow {
augstums: 408px;
maksimālais augstums: 408 pikseļi;
}

Visbeidzot es izveidoju stilu atlasītajam sīktēlam. Es nolēmu, ka es vēlos, lai mans atlasītais sīktēls būtu daļēji caurspīdīgs un ar šauru sarkanu apmali. Tā kā vienlaikus tiks atlasīts tikai viens attēls, es nolēmu šim nolūkam izmantot id ar nosaukumu “current”. CSS lietošanas priekšrocība ir tā, ka es jebkurā laikā varu mainīt tā izskatu, nemainot kodu. Stils izskatās šādi:

img # current {
apmale: 1xx sarkans;
filtrs: alfa (necaurredzamība = 50);
-moz-necaurredzamība: 0,5;
necaurredzamība: 0,5;
}

Šeit mēs redzam kādu kodu, lai vēlreiz apstrādātu pārlūka atšķirības, parastais prasa izmantot necaurredzamības elementu, taču gan IE, gan Mozilla bāzes pārlūki to vēl neatbalsta.

Visbeidzot, es nomainīju sīktēlu HTML, lai izmantotu stilus un izsauktu manu funkciju. Mana slaidrādes HTML tagad izskatās šādi:









Mēs neesam mainījuši savu JavaScript, tāpēc slaidrāde joprojām darbojas, bet tagad mums ir vairāk stila, un mūsu prezentācija ir atdalīta no mūsu HTML un JavaScript. Tomēr mums ir viena problēma, kaut arī sākotnēji izvēlētais sīktēls ir daļēji caurspīdīgs ar sarkanu apmali, tas mainās, mainot attēlus. Lai to labotu, mums jāgriežas pie sava vecā drauga JavaScript.

Līdz šim darbojošos koda piemēru varat redzēt šeit.

Video Instrukcijas: meteor.js by Roger Zurawicki (Maijs 2024).