Result
http://jsfiddle.net/kachibito/4w92j/1/embedded/result,js,css,html
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>