Slide Show JavaScript con CSS

• Aprile 25, 2024

In un precedente articolo abbiamo creato una presentazione JavaScript molto semplice. Questa presentazione è completamente funzionale e mostra anche qualcosa di appropriato per le persone che non hanno JavaScript, ma non ha tutte le funzionalità che vorrei avere per il mio sito web. In particolare, vorrei che la miniatura dell'immagine che sto visualizzando sia in qualche modo diversa dalle altre miniature. Poiché gli stili sono un buon modo per ottenere questo risultato, inizierò convertendo tutti gli attributi del mio HTML esistente in CSS.

Per prima cosa ho convertito il mio stile esistente per utilizzare i CSS. Se non hai familiarità con i CSS, il modo più semplice per iniziare a sperimentare è metterlo tra stile tag nella parte superiore del documento HTML. Il tag iniziale richiede un attributo type per dire al browser che tipo di informazioni di stile stai usando, quindi dovrebbe apparire così:



La conversione iniziale in CSS è stata facile poiché solo l'immagine grande aveva informazioni di stile e ne aveva già una id attributo utilizzato per scopi JavaScript.

#largeImage {
bordo: 2px nero solido;
larghezza: 544px;
altezza: 408 px;
}

In precedenza non avevo incluso informazioni sul dimensionamento per le anteprime, ma ho aggiunto una classe chiamata pollici e imposta tag immagine in quella classe per impostare la dimensione su 40px per 40px. Ciò significa che anche se carichi accidentalmente immagini troppo grandi o piccole per le anteprime, saranno costrette a visualizzarle in dimensioni miniaturizzate.

img.thumbs {
bordo: nessuno;
larghezza: 40px;
altezza: 40px;
}

Ho anche aggiunto a Presentazione classe per contenere l'intera presentazione. Questo mi permetterà di fare cose come aggiungere un bordo o cambiare il colore di sfondo per l'intera presentazione, se lo desidero. A questo punto lo sto usando solo per impostare l'altezza massima all'altezza dell'immagine grande, perché quando aggiungo più miniature voglio che rimangano sul lato dell'immagine grande invece di spostarsi sopra di essa. Sfortunatamente, Internet Explorer non supporta l'attributo max-height, quindi dovrò ancora lavorare su questo problema più avanti.

.Presentazione{
altezza: 408 px;
altezza massima: 408 px;
}

Alla fine ho creato uno stile per la miniatura selezionata. Ho deciso che volevo che la mia miniatura selezionata fosse semi-trasparente e avesse un bordo rosso stretto. Dal momento che verrà selezionata una sola immagine alla volta, ho deciso di utilizzare un ID chiamato "corrente" per questo scopo. Il vantaggio dell'uso dei CSS è che posso cambiare il modo in cui apparirà in qualsiasi momento senza cambiare il codice. Lo stile è simile al seguente:

img # corrente {
bordo: 1px rosso fisso;
Filtro: alpha (opacità = 50);
-moz-opacità: 0,5;
opacità: 0,5;
}

Qui vediamo del codice per gestire nuovamente le differenze del browser, le chiamate standard per l'utilizzo di un elemento di opacità, ma entrambi i browser basati su IE e Mozilla non lo supportano ancora.

Infine, ho modificato l'HTML per le miniature per utilizzare gli stili e chiamare la mia funzione. L'HTML per la mia presentazione ora è simile al seguente:









Non abbiamo modificato il nostro JavaScript, quindi la presentazione funziona ancora, ma ora abbiamo più stile e la nostra presentazione è separata dal nostro HTML e JavaScript. Tuttavia, abbiamo un problema, mentre la miniatura inizialmente selezionata è semi-trasparente con un bordo rosso, rimane così quando cambiamo le immagini. Per risolvere questo problema, dobbiamo tornare al nostro vecchio amico JavaScript.

Fin qui puoi vedere un esempio funzionante del codice.

Istruzioni Video: How To Create An Image Slider In HTML, CSS & Javascript (Aprile 2024).