簡易的なカルーセル

Result

jQuery

function next() {
    //300pxスライドさせる
    $('#in').animate({marginLeft: '-300px'}, 600, function() {
        var reStart = $('#in div:first').detach();
            
        $('#in').css('marginLeft', '0px').append(reStart);
    });
}

detach()はremove()とは動作が異なる。

css

#out {
    width:300px;
    height: 100px;
    overflow:hidden;
}

#in{
    width: 1200px;
}

a{color:#4f4742; margin:15px;}

#in div {
    float:left;
    width: 300px;
    height: 100px;
    background: #b0c6e1;
    color:#4f4742;
    margin-right:3px;
    font-size: 25px ;
}

html

<a href="javascript:" onclick="next()">click</a>
<div id="out">
    <div id="in">
        <div>item 1</div>
        <div>item 2</div>
        <div>item 3</div>
        <div>item 4</div>
    </div>
</div>