How to end a setInterval whilst using fadeOut & appendTo using images
<p>I have a code which I need to stop after it gets to the last image (IMAGE5). At the moment this keeps rotating back to the first image but I want it to effectively count the number of images and stop executing the code after the last image.</p>

<p>Sorry I am not very good with this so baby language would be very useful. Thanks in advance!</p>

<pre><code>&lt;center&gt;
&lt;div class="fadein"&gt;
&lt;IMG src="IMAGE" width=500/&gt;
&lt;IMG src="IMAGE2" width=500/&gt;
&lt;IMG src="IMAGE3" width=500/&gt;
&lt;IMG src="IMAGE4" width=500/&gt;
&lt;IMG src="IMAGE5" width=500/&gt;

&lt;/div&gt;
&lt;script&gt;
    $(function(){
      $('.fadein img:gt(0)').hide();
      setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 6000);    
});
&lt;/script&gt;
&lt;/center&gt;
</code></pre>

<p>So now, it would be like this?</p>

<pre><code>&lt;div class="fadein"&gt;
 &lt;IMG src="IMAGE" width=500/&gt;
&lt;IMG src="IMAGE2" width=500/&gt;
&lt;IMG src="IMAGE3" width=500/&gt;
&lt;IMG src="IMAGE4" width=500/&gt;
&lt;IMG src="IMAGE5" width=500/&gt;
&lt;/div&gt;

&lt;script&gt;
$(function() {
$('.fadein').find('img').each(function() {
    $(this).fadeIn().delay(6000);
});
});
</code></pre>

<p>
</p>
