disign.it | Jquery: loop fade out / in | a digital sign for a best design!
A digital sign for a best design
Javascript 4.993 visualizzazioni

Jquery: loop fade out / in

18/04/2012

Creare un piccolo slideshow con Jquery richiede pochissimi passaggi!

Prima di tutto carichiamo l'ultima versione di Jquery, (qui l'articolo), poi impostiamo le due regole css, la prima per il div contenitore (in questo esempio lo chiamiamo testimonials)

 

.testimonials {
    width: 300px;
    height: 300px;   
    overflow: hidden;
}

 

la seconda per le immagini che dovranno scorrere in fade

 

.testimonials img {
    width: 300px;
    height: 300px;
    display: none;
}

 

quindi lo script vero e proprio

 

    $(function() {
    // impostiamo div e prima immagine da mostrare
    $(".testimonials img:first").show();
    
    // inzia il loop, fade out, trova prossima img, fade img in...
    setInterval(function() {
    $(".testimonials img:first-child").fadeOut("slow").next("img").fadeIn("slow").end().appendTo(".testimonials");
    }, 5000);
    });

 

ed infine il codice html

 

<div class="testimonials">
<img src="1.jpg" width="300" height="300" />
<img src="2.jpg" width="300" height="300" />
<img src="3.jpg" width="300" height="300" />
<img src="4.jpg" width="300" height="300" />

</div>

 

← PHP: creare URL abbreviato Jquery: loading div →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.