jQuery Cycle without plugin

by nickadeemus2002

HTML

<div id="imgRotator">
    <a>foobar1</a>
<a>foobar2</a>
<a>foobar3</a>
<a>foobar4</a>
</div>

CSS

#imgRotator a { display: none; position: absolute; }

JavaScript

$(document).ready(function(){
      var delay = 5000, // 5 second delay
           rotator = $("#imgRotator"); // cached rotator
      $("#imgRotator").children().first().show();
      // function to show an image
      function showImg(img) {
            return $(img).fadeIn();
      }
      // function to hide an image
      function hideImg(img) {
            return $(img).fadeOut();
      }
      // function that causes the images to rotate
      function rotate(){
            var currImg = rotator.children(':visible'), // get curent image
                 // get next image
                 nextImg = currImg.next().length ? currImg.next() : rotator.children(':first'),
                 // hide current image
                 currPromise = hideImg(currImg),
                 // show next image
                 nextPromise = showImg(nextImg);
            // when both animations are done, setTimeout and re-execute rotate()
            $.when(currPromise,nextPromise).done(function(){
                  setTimeout(rotate,delay);
            });
      };
      // start rotation
      setTimeout(rotate,delay);
});