JavaScript  »  Articoli  »  JQuery 

La filosofia alla base di jQuery può essere racchiusa nella frase: “Massimo risultato con il minimo sforzo”. Ecco allora questo tutorial su come creare un classico slideshow d'immagini casuali con jQuery e CSS.

Potete visionare un esempio funzionante qui.

Iniziamo creando il codice XHTML che corrisponderà alle immagini della nostra galleria; la questione si riduce ad una porzione di codice molto ridotta. Come vediamo, le immagini sono posizionate in una maniera scelta da noi, ma lo script andrà ad utilizzare la modalità random per visualizzarle; per far notare che le immagini sono realmente presentate in ordine casuale, le ho modificate scrivendoci sopra il nome e l'ordine con cui le ho scritte nel XHTML.

Il codice XHTML

<div id="slideshow">
    <img src="img1.jpg" alt="Slideshow Immagine 1" class="active" />
    <img src="img2.jpg" alt="Slideshow Immagine 2" />
    <img src="img3.jpg" alt="Slideshow Immagine 3" />
    <img src="img4.jpg" alt="Slideshow Immagine 4" />
    <img src="img5.jpg" alt="Slideshow Immagine 5" />
    <img src="img6.jpg" alt="Slideshow Immagine 6" />
    <img src="img7.jpg" alt="Slideshow Immagine 7" />
    <img src="img8.jpg" alt="Slideshow Immagine 8" />
</div><!-- end #slideshow -->

Il foglio di stile

Come si può facilmente vedere, nello snippet di codice presentato si richiama semplicemente una serie di immagini. Adesso possiamo controllare la presentazione con l'aiuto dei fogli di stile.

#slideshow {
    position:relative;
    height:350px;
}
#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}
#slideshow img.active {
    z-index:10;
    opacity:1.0;
}
#slideshow img.last-active {
    z-index:9;
}

Il codice CSS ci permetterà di controllare lo stile del nostro slideshow, facendo posizionare le immagini, tutte della stessa dimensione, una sopra l'altra e facendo visionare quella attiva sopra tutte le altre utilizzando la proprietà z-index.

Altri articoli

Altre guide

Altre newsletter