Auto scrolling carousel

by Paulpro

HTML

<div id="scroller">
    <div>Item 1</div>
    <div>
        <img src="http://dummyimage.com/200x40/007/fff.jpg&text=Item+2" />
        <br />
        More item 2
    </div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
</div>

CSS

#scroller {
    width: 200px;
    height: 70px; 
    overflow: hidden;
    border: 1px solid #000;
}

#scroller div {
    font-size: 16px;   
}

JavaScript

(function(){
    
    var s = document.getElementById('scroller');
    
    var i;
    var start = function(){
        i = setInterval(function(){
            // Remove non element nodes
            while(s.firstChild && s.firstChild.nodeType != 1)
                s.removeChild(s.firstChild);
            
            // Scroll Carousel
            if(s.scrollTop > s.firstChild.offsetHeight){
                s.appendChild(s.firstChild);
                s.scrollTop = 1;
            }else
                s.scrollTop += 1;
        }, 50);
    }
        
    start();
    
    s.onmouseover = function(){
        clearInterval(i);
        s.onmouseout = function(){
            start();  
            s.onmouseout = function(){};
        }
    }

})();