Infinite Scroll

by serio

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div id='container'>
    <div id='cats'>
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
        <img src='http://johngushue.typepad.com/photos/uncategorized/2008/08/28/tabby_cat_from_h_lee_on_flickr_tabb.gif' />
    </div>
</div>

<div id='slider'></div>

CSS

#container
{
    width: 100%;
    height: 332px;
    overflow: hidden;
    position: relative;
}

#container #cats
{
    position: absolute;
    width: 9000px;
    left: 0;
}

#container #cats img
{
    display: block;
    float: left;
}

#slider
{
    margin-top: 20px;   
}

JavaScript

var speed = 1;

$(function() {

    var slider = $('#slider').slider({
        min: 0,
        max: 20,
        slide: function(e, ui) {
            speed = ui.value;
        }
    });

    var interval = setInterval(function() {

        var img_width = $('img:first').width();
        var break_at = 8;
        var break_at_num = break_at * img_width;

        $('#cats').css('left', '-=' + speed + 'px');
        var target_num = parseInt($('#cats').css('left')) * -1;
        if (target_num >= break_at_num) $('#cats').css('left', '0px');
    }, 10);
});