JavaScript Slide Show med CSS

• Kan 18, 2024

I en forrige artikkel laget vi et veldig enkelt JavaScript-lysbildefremvisning. Denne lysbildefremvisningen er fullstendig funksjonell, og viser til og med noe passende for folk som ikke har JavaScript, men det har ikke helt alle funksjonene jeg vil ha for nettstedet mitt. Spesielt vil jeg at miniatyrbildet til bildet jeg nå viser, på en eller annen måte skal se annerledes ut enn de andre miniatyrbildene. Siden stiler er en god måte å oppnå dette på, skal jeg starte med å konvertere alle attributtene i min eksisterende HTML til CSS.

Først konverterte jeg min eksisterende styling for å bruke CSS. Hvis du ikke er kjent med CSS, er den enkleste måten å begynne å eksperimentere med det å sette det mellom stil tagger i hodet på HTML-dokumentet. Den første koden trenger en type attributt for å fortelle nettleseren hvilken type stilinformasjon du bruker, så det skal se slik ut:



Den første konverteringen til CSS var enkel siden bare det store bildet hadde stylinginformasjon og det allerede hadde en id attributt som ble brukt til JavaScript-formål.

#largeImage {
kant: 2px solid svart;
bredde: 544px;
høyde: 408px;
}

Jeg hadde ikke tidligere inkludert størrelsesinformasjon for miniatyrbildene, men jeg la til en klasse som heter tommelen og angi bildekoder i den klassen for å angi størrelsen til 40px med 40px. Dette betyr at selv om jeg tilfeldigvis laster inn bilder som er for store eller små for miniatyrbilder, vil de bli tvunget til å vises i miniatyrstørrelse.

img.thumbs {
grense: ingen;
bredde: 40px;
høyde: 40px;
}

Jeg la også til en lysbildefremvisning klasse for å holde hele lysbildefremvisningen. Dette vil tillate meg å gjøre ting som å legge til en kant eller endre bakgrunnsfarge for hele lysbildefremvisningen hvis jeg ønsker det. På dette tidspunktet bruker jeg den bare til å stille inn maksimal høyde til høyden på det store bildet, for når jeg legger til flere miniatyrbilder, vil jeg at de skal holde seg på siden av det store bildet i stedet for å bevege seg over det. Dessverre støtter ikke Internet Explorer maks-høyde-attributtet, så jeg må fortsatt jobbe med dette problemet mer senere.

.slideshow {
høyde: 408px;
maks høyde: 408 px;
}

Til slutt opprettet jeg en stil for det valgte miniatyrbildet. Jeg bestemte meg for at jeg ville at min valgte miniatyrbilde skulle være halvgjennomsiktig og ha en smal rød kant. Siden bare ett bilde vil bli valgt om gangen bestemte jeg meg for å bruke en ID kalt "aktuell" for dette formålet. Fordelen med å bruke CSS er at jeg når som helst kan endre hvordan det vil se ut uten å endre koden. Stilen ser slik ut:

img # nåværende {
kant: 1px solid rød;
filter: alfa (opacity = 50);
-moz opasitet: 0,5;
uklarhet: 0,5;
}

Her ser vi noen kode for å håndtere nettleserforskjeller igjen, standarden krever bruk av et opacitetselement, men både IE- og Mozilla-baserte nettlesere støtter ikke det ennå.

Til slutt endret jeg HTML for miniatyrbildene for å bruke stilene og kalle funksjonen min. HTML for slideshowet mitt ser nå slik ut:









Vi har ikke endret JavaScript, så lysbildefremvisningen fungerer fremdeles, men nå har vi mer styling og presentasjonen vår er skilt fra HTML og JavaScript. Imidlertid har vi ett problem, mens det opprinnelig valgte miniatyrbildet er halvgjennomsiktig med en rød kant, det forblir slik når vi endrer bilder. For å fikse dette, må vi slå tilbake til vår gamle venn JavaScript.

Du kan se et fungerende eksempel på koden så langt her.

Video Instruksjoner: Gallery Using HTML, CSS, And JavaScript | How To Open Images Using JavaScript | JavaScript Tutorial (Kan 2024).