Simple jquery fading carousel

rolling though a series of image in a container div

by Glynne Turner

HTML

<div class="fadein">
    <div>
    <img src="https://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" /></div>
    <div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></div>
    <div> <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></div>
</div>

CSS

.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }

JavaScript

function runfade(){
    $('.fadein div:gt(0)').hide();
    var start = setInterval(function(){
      $('.fadein :first-child').fadeOut(600)
         .next('div').fadeIn(600)
         .end().appendTo('.fadein');}, 
      6000);
};
runfade();
$('.fadein').hover(function(start){
    clearInterval(start);
});

function cycleImages(){
      $('.cycler').each(function(){
          var $active = $(this).find('.active');
          var $next = ($(this).find('.active').next().length > 0) ? $(this).find('.active').next() : $(this).find('div:first');
          $next.css('z-index',2);//move the next image up the pile
          $active.fadeOut(600,function(){//fade out the top image
              $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
              $next.css('z-index',3).addClass('active');//make the next image the top one
          });
      });
    };
	
      // run every 7s
       setInterval(function() {
            cycleImages();    
        }, 600);