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});
}

悩みどころ

でも、これだと、要素が端っこまで来た時に、画面の外側に消えていってしまう。ループされるにはどうすればいか... わかるからアドバイスください

参考

ポカリ
jsfiddle
animate offset().left
Javascriptでclick(タップ)するたびにカウントアップとカウントダウン
Javascriptでボタンを押したら少しずつスクロールさせる