Banner Image Rotator

by skibulk

HTML

<div id="rotator">
    <div class="slide">First</div>
    <div class="slide">Second Second</div>
    <div class="slide">Third Third Third</div>
</div>

CSS

#rotator {
    position: relative;
}

#rotator .slide {
    width: 100px;
    height: 100px;
    background: gray;
}

JavaScript

function setupRotator(wrapSelector, slideSelector) {
    var slides = [];
    $(wrapSelector).find(slideSelector).each(function(i, el){
        slide = $(el);
        slides.push(slide);
    });
    
    var i = 0, l = slides.length;
    window.setInterval(function(){
        slides[i].appendTo(wrapSelector);
        if (++i == l) i = 0;
        slides[i].hide().fadeIn(1000);
    }, 2000);
}

setupRotator('#rotator', '.slide');