too much recursion error...

Question

I am showing images one by one.. But it displays two images at a time... Why this strange behavior?

<div Id="BannerDiv">
  <img src="images/CIOT flash/im_01.png" alt="image1"/>
  <img src="images/CIOT flash/im_02.png" alt="image2"/>
  <img src="images/CIOT flash/im_03.png" alt="image3"/>
  <img src="images/CIOT flash/im_04.png" alt="image4"/>
  <img src="images/CIOT flash/im_05.png" alt="image5"/>
</div>

<script type="text/javascript">
  jQuery.noConflict();
  jQuery(function() {
    jQuery('#BannerDiv > :first').show();
    setTimeout(rotate,1000);
  });

  function rotate() {
    var c = jQuery('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
      setTimeout(rotate, 1000);
    }).next().css({ 'z-index': 1 }).show();
    if (c.length == 0) jQuery('#BannerDiv > :first').css({ 'z-index': 1 }).show();
  }
</script>