Slide Show JavaScript con funzioni

• Aprile 30, 2024

Negli articoli precedenti abbiamo creato e messo a punto una messa a punto su una presentazione JavaScript molto semplice. Questa presentazione è completamente funzionale e mostra anche qualcosa di appropriato per le persone che non hanno JavaScript, ma mi piacerebbe che la miniatura dell'immagine che sto visualizzando sia diversa dalle altre miniature. Avevo deciso di utilizzare un ID CSS chiamato "corrente" che rendeva le immagini semi-trasparenti e aggiungeva un sottile bordo rosso per la miniatura selezionata. Nel mio ultimo articolo, ho ottenuto questo comportamento per l'anteprima inizialmente selezionata ma quando ho selezionato una nuova anteprima, la nuova anteprima non è cambiata e l'anteprima iniziale ha mantenuto lo stile selezionato.

Nella versione precedente della mia presentazione, quando un utente fa clic su una miniatura, vengono visualizzate le immagini grandi associate. Quello che voglio che faccia è cambiare l'immagine grande, impostare la miniatura dell'immagine precedentemente selezionata per tornare alla normalità e rendere questa miniatura visualizzata con lo stile speciale per l'immagine selezionata. Dato che ora sto facendo più cose quando si fa clic sulla miniatura, sono passato dal mettere tutto il mio codice nell'attributo onClick del img tag per utilizzare una funzione. Le funzioni JavaScript di solito vanno in testa sezione dell'HTML in modo che vengano caricati e pronti quando viene caricato il corpo della pagina. Possono essere inseriti direttamente tra copione tag o put e un file e incluso. Per i programmi brevi o quando sto attivamente codificando, trovo più facile inserire il mio codice direttamente nella pagina come ho fatto qui.

Avrei potuto usare una funzione per ogni miniatura ma poiché tutto ciò che cambia da anteprima a anteprima è il nome dell'immagine e l'id dell'anteprima (e ho usato il nome dell'immagine per l'id), ho scritto una singola funzione che ha preso il id come argomento e lo ha usato per creare il nome dell'immagine appropriato aggiungendo ".jpg". Ho chiamato la mia funzione displayLarge.

function displayLarge (id) {
// cambia l'immagine grande
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = imageName.;
// ripristina lo stile della miniatura precedente al valore predefinito
. Document.getElementById ( "corrente") id = oldID;
// prendi nota dell'id prima di cambiarlo
oldID = id
// contrassegna la miniatura come corrente con lo stile corrente
document.getElementById (id) .id = "current";
}

Affinché questa funzione funzioni per la prima volta, ho anche dovuto dare una definizione iniziale per oldID, la variabile che sto usando per ricordare l'id originale della miniatura attualmente selezionata. Tutto questo codice viene inserito nella sezione head della pagina Web, in modo che venga caricato prima del caricamento della pagina.

Infine, ho cambiato l'HTML per le anteprime per chiamare la mia funzione. L'HTML per la mia presentazione ora è simile al seguente:











Puoi vedere un esempio funzionante di questo codice qui.

Istruzioni Video: Abbazia di Sant'Antimo (Montalcino - SI) - Slide show (Aprile 2024).