$(document).ready(function(){

    setInterval(function(){
        //get current active images
        var active $('#banners .active');
        // if there is another image(object) left then make that image next
        // if not, go back to the first image of the banners div
        if(active.next().length > 0 )
            var next = active.next();
        else
            var next = $('#banners img:first');
        //get the next image ready by modifying the z-index
        next.css('z-index','2');
        //Fade out the active image, then
        active.fadeOut(1000,function(){
        //Move the active image to the back of the pile,show it and remove the active class
        active.css('z-index','1').show().removeClass('active');
        //make the next image the active one
        next.css('z-index','3').addClass('active');
        });
    },2500);
});