JavaScript-lysbildefremvisning med funksjoner

• Kan 9, 2024

I forrige artikler opprettet og gjorde vi litt finjustering på et veldig enkelt JavaScript-lysbildefremvisning. Dette lysbildefremvisningen er fullstendig funksjonell, og viser til og med noe som passer for personer som ikke har JavaScript, men jeg vil gjerne at miniatyrbildet av bildet jeg viser for øyeblikket ser annerledes ut enn de andre miniatyrbildene. Jeg hadde avgjort med å bruke en CSS-id kalt "aktuell" som gjorde bilder halvgjennomsiktige og la til en tynn rød kant for det valgte miniatyrbildet. I min siste artikkel hadde jeg fått denne oppførselen for det opprinnelig valgte miniatyrbildet, men da jeg valgte en ny miniatyrbilde, endret ikke den nye miniatyren seg, og den opprinnelige miniatyrbildet beholdt den valgte stylingen.

I en forrige versjon av lysbildefremvisning, når en bruker klikker på et miniatyrbilde, vises de tilhørende store bildene. Det jeg vil gjøre, er å endre det store bildet, stille miniatyrbildet til det tidligere valgte bildet til å gå tilbake til normalt og gjøre dette miniatyrbildet med den spesielle stilen for det valgte bildet. Siden jeg nå gjør flere ting når det klikkes på miniatyrbildet, byttet jeg fra å legge all koden min i onClick-attributtet til img tag til å bruke en funksjon. JavaScript-funksjoner går vanligvis i hode delen av HTML slik at de blir lastet og klare når siden på siden lastes inn. De kan enten settes direkte mellom manus koder eller put og en fil og inkludert. For korte programmer, eller når jeg aktivt koder, synes jeg det er lettere å sette koden min direkte på siden som jeg gjorde her.

Jeg kunne ha brukt en funksjon for hvert miniatyrbilde, men siden alt som endres fra miniatyrbilde til miniatyrbilde er navnet på bildet og ID-en til miniatyrbildet (og jeg brukte bildenavnet for IDen), skrev jeg en enkelt funksjon som tok id som et argument og brukte det til å opprette det riktige bildenavnet ved å legge til ".jpg" til det. Jeg ringte funksjonen min displayLarge.

funksjon displayLarge (id) {
// endre det store bildet
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = imageName.;
// sette stilen til forrige miniatyrbilde tilbake til standard
. Document.getElementById ( "strøm") id = oldID;
// noter IDen før vi endrer den
oldID = id
// merk miniatyrbildet som gjeldende med gjeldende stil
document.getElementById (id) .id- = "strøm";
}

For at denne funksjonen skulle fungere første gang, måtte jeg også gi en innledende definisjon for oldID, variabelen jeg bruker for å huske den opprinnelige IDen til miniatyrbildet som er valgt nå. All denne koden går i hovedseksjonen på websiden, slik at den lastes før siden lastes inn.

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











Du kan se et fungerende eksempel på denne koden her.

Video Instruksjoner: Simple JavaScript Slideshow In 5 Minutes (Kan 2024).