JavaScript Slide Show med CSS

• Kan 18, 2024

I en tidligere artikel oprettede vi et meget simpelt JavaScript-diasshow. Dette diasshow er fuldstændigt funktionelt og viser endda noget passende til folk, der ikke har JavaScript, men det har ikke helt de funktioner, jeg gerne vil have til mit websted. Især vil jeg gerne have, at miniaturebilledet af det billede, jeg i øjeblikket viser, på en eller anden måde ser anderledes ud end de andre miniaturebilleder. Da stilarter er en god måde at opnå dette på, vil jeg starte med at konvertere alle attributterne i min eksisterende HTML til CSS.

Først konverterede jeg min eksisterende styling til at bruge CSS. Hvis du ikke er bekendt med CSS, er den nemmeste måde at begynde at eksperimentere med det at sætte det imellem stil tags i hovedet på dit HTML-dokument. Det oprindelige tag har brug for en typeattribut for at fortælle browseren, hvilken type stilinformation du bruger, så det skal se sådan ud:



Den oprindelige konvertering til CSS var let, da kun det store billede havde stylingoplysninger, og det allerede havde en id attribut, der blev brugt til JavaScript-formål.

#largeImage {
kant: 2px massiv sort;
bredde: 544px;
højde: 408px;
}

Jeg havde ikke tidligere inkluderet størrelsesoplysninger til miniaturerne, men jeg tilføjede en klasse kaldet tommelfingre og indstil billedmærker i den klasse til at indstille størrelsen til 40px med 40px. Dette betyder, at selv hvis jeg ved en fejltagelse indlæser billeder, der er for store eller små til miniaturebilleder, bliver de tvunget til at vises i miniaturestørrelse.

img.thumbs {
grænse: ingen;
bredde: 40px;
højde: 40px;
}

Jeg tilføjede også en slideshow klasse for at afholde hele slideshowet. Dette tillader mig at gøre ting som at tilføje en kant eller ændre baggrundsfarve på hele diasshowet, hvis jeg ønsker det. På dette tidspunkt bruger jeg det kun til at indstille den maksimale højde til højden på det store billede, for når jeg tilføjer flere miniaturebilleder, vil jeg have dem til at forblive på siden af ​​det store billede i stedet for at bevæge sig over det. Desværre understøtter Internet Explorer ikke attributten for maksimal højde, så jeg bliver stadig nødt til at arbejde på dette problem mere senere.

.slideshow {
højde: 408px;
max-højde: 408px;
}

Til sidst oprettede jeg en stil til den valgte miniature. Jeg besluttede, at jeg ønskede, at min valgte miniature skulle være halvgennemsigtig og have en smal rød kant. Da kun et billede bliver valgt ad gangen, besluttede jeg at bruge en id kaldet "aktuel" til dette formål. Fordelen ved at bruge CSS er, at jeg når som helst kan ændre, hvordan det ser ud, uden at ændre koden. Stilen ser sådan ud:

img # strøm {
kant: 1px massiv rød;
filter: alpha (opacity = 50);
moz-opacitet: 0,5;
opacitet: 0,5;
}

Her ser vi nogle kode til at håndtere browserforskelle igen, standard opfordrer til at bruge et opacitetselement, men både IE og Mozilla-baserede browsere understøtter ikke det endnu.

Til sidst ændrede jeg HTML for miniaturerne for at bruge typografierne og kalde min funktion. HTML til min slideshow ser nu sådan ud:









Vi har ikke ændret vores JavaScript, så diasshowet fungerer stadig, men nu har vi mere styling, og vores præsentation er adskilt fra vores HTML og JavaScript. Vi har dog et problem, mens den oprindeligt valgte miniature er halvgennemsigtig med en rød kant, forbliver den sådan, når vi ændrer billeder. For at løse dette skal vi vende tilbage til vores gamle ven JavaScript.

Her kan du se et fungerende eksempel på koden.

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