簡易的なコンテンツスライダー

Result

jQuery

$(document).ready(function (){
    //クリックイベント
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        //スライダーが250pxの場合の数値
        $('.slider .cover').animate({left:-250*(parseInt(integer)-1)})
        //操作ボタンの処理
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });    
});

css

.slider {
    width:160px;
    overflow:hidden;
    position: relative;
    height:170px;
    margin-bottom:20px;
}
.slider .cover{
    width:750px; 
    position: absolute;
    height:160px;
}
.slider .contents {
    width:250px;
    float:left;
    padding:20px 0;
}
.button1,.button2,.button3{
    background:#999;
    padding:6px;
    display:block;
    float:left;
    margin-right:5px;
}
.active{
    background:#111;
    padding:6px;
    display:block;
    float:left;
    outline:none;
}
.clear{clear:both;}

html

<div id="button">
         <a class="button1 active" rel="1" href="javascript:void(0)"></a>
         <a class="button2" rel="2" href="javascript:void(0)"></a>
         <a class="button3" rel="3" href="javascript:void(0)"></a>
    </div> 
 
    <div class="clear"></div>
    <div class="slider">
        <div class="cover">
            <div class="contents">
                contents01
            </div>
            <div class="contents">
                contents02
            </div>
            <div class="contents">
                contents03
            </div>
        </div> 
    </div>