超簡単なカルーセル

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>

CSS

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

#in{
    width: 1200px;
}

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

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

JavaScript

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