JavaScript-diavoorstelling met functies

• Mei 20, 2024

In eerdere artikelen hebben we een zeer eenvoudige JavaScript-diavoorstelling gemaakt en verfijnd. Deze diavoorstelling is volledig functioneel en toont zelfs iets dat geschikt is voor mensen die geen JavaScript hebben, maar ik wil graag dat de miniatuur van de afbeelding die ik momenteel zie er anders uitziet dan de andere miniaturen. Ik had besloten een CSS-ID te gebruiken met de naam "huidig", waardoor afbeeldingen semi-transparant werden en een dunne rode rand werd toegevoegd voor de geselecteerde miniatuur. In mijn laatste artikel had ik dit gedrag gekregen voor de aanvankelijk geselecteerde miniatuur, maar toen ik een nieuwe miniatuur selecteerde, veranderde de nieuwe miniatuur niet en bleef de oorspronkelijke miniatuur behouden.

In de vorige versie van mijn diavoorstelling worden de bijbehorende grote afbeeldingen weergegeven wanneer een gebruiker op een miniatuur klikt. Wat ik wil, is de grote afbeelding wijzigen, de miniatuur van de eerder geselecteerde afbeelding instellen om terug te keren naar normaal en deze miniatuurweergave maken met de speciale stijl voor de geselecteerde afbeelding. Aangezien ik nu meerdere dingen doe wanneer op de miniatuur wordt geklikt, schakelde ik over van het plaatsen van al mijn code in het kenmerk onClick van de img tag om een ​​functie te gebruiken. JavaScript-functies gaan meestal in de hoofd gedeelte van de HTML zodat ze worden geladen en klaar zijn wanneer de hoofdtekst van de pagina wordt geladen. Ze kunnen direct tussen worden ingevoegd script tags of put en een bestand en opgenomen. Voor korte programma's of wanneer ik actief codeer, vind ik het gemakkelijker om mijn code direct op de pagina te plaatsen, zoals ik hier deed.

Ik had een functie voor elke miniatuur kunnen gebruiken, maar omdat het enige dat van miniatuur naar miniatuur verandert, de naam van de afbeelding en de id van de miniatuur is (en ik gebruikte de afbeeldingsnaam voor de id), schreef ik een enkele functie die de id als argument en gebruikte dat om de juiste afbeeldingsnaam te maken door ".jpg" eraan toe te voegen. Ik noemde mijn functie displayLarge.

functie displayLarge (id) {
// verander de grote afbeelding
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = imageName.;
// zet de stijl van de vorige miniatuur terug op de standaard
. Document.getElementById ( "current") id = oldID;
// noteer het ID voordat we het wijzigen
oldID = id
// markeer de miniatuur als huidig ​​met de huidige stijl
document.getElementById (id) .id = "current";
}

Om deze functie de eerste keer te laten werken, moest ik ook een eerste definitie geven oldID, de variabele die ik gebruik om de oorspronkelijke id van de miniatuur te onthouden die momenteel is geselecteerd. Al deze code komt in het hoofdgedeelte van de webpagina, zodat deze wordt geladen voordat de pagina wordt geladen.

Uiteindelijk heb ik de HTML voor de miniaturen gewijzigd om mijn functie aan te roepen. De HTML voor mijn diavoorstelling ziet er nu als volgt uit:











U kunt een werkend voorbeeld van deze code hier bekijken.

Video-Instructies: Simple JavaScript Slideshow In 5 Minutes (Mei 2024).