JavaScript slideshow med funktioner

• April 29, 2024

I tidligere artikler lavede og finjusterede vi et meget simpelt JavaScript-diasshow. Dette diasshow er fuldstændigt funktionelt og viser endda noget passende for folk, der ikke har JavaScript, men jeg vil gerne have, at miniaturebilledet af det billede, jeg i øjeblikket viser, ser anderledes ud end de andre miniaturebilleder. Jeg havde slået mig til ro med at bruge et CSS-id kaldet "aktuel", hvilket gjorde billeder halvtransparente og tilføjede en tynd rød ramme til den valgte miniature. I min sidste artikel fik jeg denne opførsel for den oprindeligt valgte miniaturebillede, men da jeg valgte en ny miniature, ændrede den nye miniature sig ikke, og den oprindelige miniature bevarede den valgte styling.

I en forrige version af mit lysbilledshow, når en bruger klikker på et miniaturebillede, vises de tilknyttede store billeder. Hvad jeg vil have det til at gøre er at ændre det store billede, indstille miniature af det tidligere valgte billede til at gå tilbage til det normale og gøre dette miniaturebillede med den specielle stil for det valgte billede. Da jeg nu gør flere ting, når der klikkes på miniaturen, skiftede jeg fra at sætte al min kode i attributten onClick i img tag til at bruge en funktion. JavaScript-funktioner går normalt i hoved sektion af HTML'en, så de bliver indlæst og klar, når siden af ​​kroppen indlæses. De kan enten indsættes direkte mellem manuskript tags eller put og en fil og inkluderet. For korte programmer, eller når jeg aktivt koder, finder jeg det lettere at placere min kode direkte på siden, som jeg gjorde her.

Jeg kunne have brugt en funktion til hver miniature, men da alt det, der skifter fra miniaturebillede til miniaturebillede, er navnet på billedet og id'et på miniature (og jeg brugte billednavnet til id'et), skrev jeg en enkelt funktion, der tog id som et argument og brugte det til at oprette det passende billednavn ved at tilføje ".jpg" til det. Jeg kaldte min funktion displayLarge.

funktion displayLarge (id) {
// ændre det store billede
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = ImageName.;
// sæt stilen på den forrige miniaturebillede tilbage til standardindstillingen
. Document.getElementById ( "nuværende") id = oldID;
// noter id før vi ændrer det
oldID = id
// marker miniaturebilledet som aktuelt med den aktuelle stil
document.getElementById (id) .id = "nuværende";
}

For at denne funktion kunne fungere første gang, var jeg også nødt til at give en indledende definition til oldID, variablen jeg bruger til at huske det originale id for den miniaturebillede, der i øjeblikket er valgt. Al denne kode findes i hovedsektionen af ​​websiden, så den indlæses inden siden indlæses.

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











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

Video Instruktioner: The benefits of a bilingual brain - Mia Nacamulli (April 2024).