Javascriptでボタンを押したら少しずつスクロールさせる

お手本

イメージとしてはポカリスエットのサイトに置かれているこういうの

サンプル

サンプルとしてはこういうものを用意

実装

Javascriptの.animate()関数を使う

html

<div id="test">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150"  id="one">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150" id="tow">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150" id="three">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150" id="four">
  </div>

javascript

//カウンタの初期値を設定
var countUpValue = 0;

function OnButtonClickRight() {
countUpValue = countUpValue + 50 ;
$("#test").animate({marginLeft: countUpValue});
}

function OnButtonClickLeft() {
countUpValue = countUpValue - 50 ;
$("#test").animate({marginLeft: countUpValue});
}