JavaScript Slide Show med CSS

• Maj 20, 2024

I en tidigare artikel skapade vi ett mycket enkelt JavaScript-bildspel. Det här bildspelet är helt funktionellt och till och med visar något som är lämpligt för personer som inte har JavaScript, men det har inte riktigt alla funktioner jag vill ha för min webbplats. I synnerhet skulle jag vilja att miniatyrbilden på den bild som jag för närvarande visar på något sätt ser annorlunda ut från de andra miniatyrerna. Eftersom stilar är ett bra sätt att uppnå detta kommer jag att börja med att konvertera alla attribut i min befintliga HTML till CSS.

Först konverterade jag min befintliga styling för att använda CSS. Om du inte är bekant med CSS, är det enklaste sättet att börja experimentera med det att sätta det mellan stil taggar i huvudet på ditt HTML-dokument. Den första taggen behöver ett typattribut för att berätta för webbläsaren vilken typ av stilinformation du använder, så det ska se ut så här:



Den första konverteringen till CSS var enkel eftersom bara den stora bilden hade stylinginformation och den redan hade en id attribut som användes för JavaScript-syften.

#largeImage {
kant: 2px solid svart;
bredd: 544px;
höjd: 408px;
}

Jag hade inte tidigare inkluderat storleksinformation för miniatyrbilderna, men jag lade till en klass som heter tummen och ställ in bildtaggar i den klassen för att ställa in storleken till 40px med 40px. Detta betyder att även om jag av misstag laddar bilder som är för stora eller små för miniatyrbilder, kommer de att tvingas visa i miniatyrstorlek.

img.thumbs {
gräns: ingen;
bredd: 40px;
höjd: 40px;
}

Jag har också lagt till en bildspel klass för att hålla hela bildspelet. Detta gör att jag kan göra saker som att lägga till en ram eller ändra bakgrundsfärgen för hela bildspelet om jag vill. Just nu använder jag den bara för att ställa in maximal höjd till höjden på den stora bilden, för när jag lägger till fler miniatyrbilder vill jag att de ska stanna på sidan av den stora bilden istället för att röra sig över den. Tyvärr stöder inte Internet Explorer max-höjdattributet, så jag måste fortfarande arbeta med det här problemet mer senare.

.slideshow {
höjd: 408px;
max-höjd: 408px;
}

Slutligen skapade jag en stil för den valda miniatyren. Jag bestämde mig för att jag ville att min valda miniatyrbild skulle vara halvgenomskinlig och ha en smal röd kant. Eftersom bara en bild kommer att väljas åt gången bestämde jag mig för att använda en id som heter "aktuell" för detta ändamål. Fördelen med att använda CSS är att jag kan ändra hur det ser ut när som helst utan att ändra koden. Stilen ser ut så här:

img # ström {
kant: 1px fast röd;
filter: alfa (opacitet = 50);
-moz-opacitet: 0,5;
opacitet: 0,5;
}

Här ser vi en del kod för att hantera webbläsarskillnader igen, standarden kräver att använda ett opacitetselement, men både IE och Mozilla-baserade webbläsare stöder inte det ännu.

Slutligen ändrade jag HTML för miniatyrbilderna för att använda stilarna och kalla min funktion. HTML för mitt bildspel ser nu ut så här:









Vi har inte ändrat vårt JavaScript, så bildspelet fungerar fortfarande, men nu har vi mer styling och vår presentation är separerad från vår HTML och JavaScript. Men vi har ett problem, medan den ursprungligen valda miniatyren är halvgenomskinlig med en röd kant, så förblir den så när vi byter bilder. För att fixa detta måste vi återvända till vår gamla vän JavaScript.

Här kan du se ett fungerande exempel på koden.

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