too much recursion error

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-ind开发者_JAVA技巧ex': 1 }).show();
    if (c.length == 0) jQuery('#BannerDiv > :first').css({ 'z-index': 1 }).show();
  }
</script>

Hey guys i had this very problem 'Too much recursion & also Stack Overflow error' doing image cycles too check http://callmenick.com/post/instantiation-patterns-in-javascript

its called Functional Instantiation or Closures, returning values etc. can fix it.

If you go to this git repo http://github.com/rebornweb/neoscript

and go to image_cycles folder and the html dreimage_cycler.html will have the code that works :)

Cheers