Result
http://jsfiddle.net/kachibito/KHaxt/1/embedded/result,js,css,html
jQuery
$(document).ready(function() { //クリックで左に152px動かす $('#next').click(function(event) { event.preventDefault(); $('.table').animate({scrollLeft:'+=152'}, 'slow'); }); //クリックで右に152px動かす $('#pre').click(function(event) { event.preventDefault(); $('.table').animate({scrollLeft:'-=152'}, 'slow'); }); });
CSS
.table {/*実際に表示される部分*/ width:456px; height:300px; border:solid 1px #ddd; background-color:#eee; overflow:hidden; } .slide {/*スライド全体。数が増えたら数値も増やす*/ width:1064px; height:300px; overflow:hidden; } .slide div {/*ボックス1つのレイアウト*/ float:left; width:150px; height:300px; background-color:#eee; border:solid 1px #ddd; }
HTML
<a id="pre" href="#"><<前へ</a>||<a id="next" href="#">次へ>></a> <div class="table"> <div class="slide"> <div id="col-1"><p>col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 </p></div> <div id="col-2"><p>col-2 col-2 col-2 col-2 col-2 col-2 col-2 col-2 col-2 col-2 </p></div> <div id="col-3"><p>col-3 col-3 col-3 col-3 col-3 col-3 col-3 col-3 col-3 col-3 </p></div> <div id="col-4"><p>col-4 col-4 col-4 col-4 col-4 col-4 col-4 col-4 col-4 col-4 </p></div> <div id="col-5"><p>col-5 col-5 col-5 col-5 col-5 col-5 col-5 col-5 col-5 col-5 </p></div> <div id="col-6"><p>col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6 </p></div> <div id="col-7"><p>col-7 col-7 col-7 col-7 col-7 col-7 col-7 col-7 col-7 col-7 </p></div> </div> </div>