JavaScript-diavoorstelling met CSS

• Mei 2, 2024

In een vorig artikel hebben we een heel eenvoudige JavaScript-diavoorstelling gemaakt. Deze diavoorstelling is volledig functioneel en toont zelfs iets dat geschikt is voor mensen die geen JavaScript hebben, maar het heeft niet alle functies die ik graag zou willen hebben voor mijn website. Ik wil met name dat de miniatuur van de afbeelding die ik momenteel weergeef, er anders uitziet dan de andere miniaturen. Aangezien stijlen een goede manier zijn om dit te bereiken, ga ik beginnen met het omzetten van alle attributen in mijn bestaande HTML naar CSS.

Eerst converteerde ik mijn bestaande styling om CSS te gebruiken. Als u niet bekend bent met CSS, is de eenvoudigste manier om ermee te experimenteren het tussen te zetten stijl tags in de kop van uw HTML-document. De eerste tag heeft een type-kenmerk nodig om de browser te vertellen welk type stijlinformatie u gebruikt, dus het zou er zo uit moeten zien:



De eerste conversie naar CSS was eenvoudig omdat alleen de grote afbeelding stijlinformatie had en deze al een ID kaart kenmerk dat werd gebruikt voor JavaScript-doeleinden.

#largeImage {
rand: 2 px zwart;
breedte: 544 px;
hoogte: 408 px;
}

Ik had niet eerder informatie over de grootte van de miniaturen opgenomen, maar ik heb een klasse toegevoegd duimen en stel afbeeldingstags in die klasse in om de grootte in te stellen op 40 px bij 40 px. Dit betekent dat zelfs als ik per ongeluk afbeeldingen laad die te groot of te klein zijn voor miniaturen, deze toch in miniatuurformaat moeten worden weergegeven.

img.thumbs {
border: geen;
breedte: 40 px;
hoogte: 40 px;
}

Ik heb ook een toegevoegd slideshow klasse om de hele diavoorstelling te houden. Hiermee kan ik dingen doen zoals een rand toevoegen of de achtergrondkleur voor de hele diavoorstelling wijzigen als ik dat wil. Op dit moment gebruik ik het alleen om de maximale hoogte in te stellen op de hoogte van de grote afbeelding, omdat wanneer ik meer miniaturen toevoeg, ik wil dat ze aan de zijkant van de grote afbeelding blijven in plaats van erboven te bewegen. Helaas ondersteunt Internet Explorer het kenmerk max-height niet, dus ik zal hier later nog meer aan moeten werken.

.slideshow {
hoogte: 408 px;
max-hoogte: 408 px;
}

Eindelijk heb ik een stijl gemaakt voor de geselecteerde miniatuur. Ik besloot dat ik wilde dat mijn geselecteerde miniatuur semi-transparant was en een smalle rode rand had. Omdat er slechts één afbeelding tegelijk wordt geselecteerd, besloot ik om een ​​id met de naam "huidig" voor dit doel te gebruiken. Het voordeel van het gebruik van CSS is dat ik op elk moment kan wijzigen hoe het eruit zal zien zonder de code te wijzigen. De stijl ziet er zo uit:

img # huidige {
rand: 1 px effen rood;
Filter: alfa (opaciteit = 50);
-moz-opaciteit: 0.5;
opaciteit: 0,5;
}

Hier zien we wat code om browserverschillen weer aan te pakken, de standaard roept op om een ​​opacity-element te gebruiken, maar zowel IE als Mozilla-gebaseerde browsers ondersteunen dat nog niet.

Ten slotte heb ik de HTML voor de miniaturen gewijzigd om de stijlen te gebruiken en mijn functie aan te roepen. De HTML voor mijn diavoorstelling ziet er nu als volgt uit:









We hebben onze JavaScript niet gewijzigd, dus de diavoorstelling werkt nog steeds, maar nu hebben we meer styling en is onze presentatie gescheiden van onze HTML en JavaScript. We hebben echter één probleem, terwijl de aanvankelijk geselecteerde miniatuur semi-transparant is met een rode rand, dit blijft zo wanneer we afbeeldingen wijzigen. Om dit te verhelpen, moeten we terugkeren naar onze oude vriend JavaScript.

U kunt hier een werkend voorbeeld van de code tot nu toe zien.

Video-Instructies: How To Create An Image Slider In HTML, CSS & Javascript (Mei 2024).