Need explanation of jquery code regarding slideshow
<p>a div has few image and the code below is showing one image at a time. it is just like slide show. i read the code but just do not understand how it is working. the code is tested and it is working. only one problem found that sometime animation run so fast. i just do not understand what is wrong in the code as a reason sometime images changes very fast in slide show.</p>

<h2>here is html and jquery code</h2>

<pre><code>&lt;div class="headerCarouselwrapper"&gt;
            &lt;img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image1.jpg" /&gt;
            &lt;img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image2.jpg" /&gt;
            &lt;img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image3.jpg" /&gt;
            &lt;img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image4.jpg" /&gt;
&lt;/div&gt;

$(document).ready(function () { 
$('.headerCarouselwrapper img:gt(0)').hide();
    setInterval(function () {
        $('.headerCarouselwrapper :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.headerCarouselwrapper');
    }, 5000);
});
</code></pre>

<p><strong>two things i need to know</strong></p>

<p>1)how this code works. if possible then tell me how each like works</p>

<p>2) why sometime slide show animation run very fast.</p>

<p>thanks</p>
