Jquery: loop fade out / in

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>