javascript - 画像の余白を動的にする方法

Question

私が持っているのは、このような長い長方形の画像です http://www.openstudio.fr/jquery-virtual-tour/img/sculpteur.jpg

画像を左、右に移動して一時停止する 3 つのボタンがあります。この仮想ツアーを再現しようとしてい ます http://www.openstudio.fr/jquery-virtual-tour/

これは私のHtmlコンテンツです

<div class="pan" style="margin-left:-500px">
    <img src="sculpteur.jpg" />
</div>

<button class="right"> --) </button>   // move to right  >>
<button class="left"> (-- </button>    // move to left   <<
<button class="pause">||</button>      // pause          X

これがJavascriptファイルです。右ボタンクリック後のコード

$(document).ready(function() {
    $a=parseInt($('.pan').css('marginLeft'));

    $(".right").click(function(){
        $('.pan').stop();
        $direction = "right";
        movePanorama($direction,$('.pan'), $a);
    });
    ... ...   
});


function movePanorama($direction, $e, $a){
    if($direction=="right"){
        $e.animate({marginLeft:$a--}, 1, function(){
            movePanorama($direction,$e, $a);
        });
    }

    .......
}

私の問題は、左または右のボタンをクリックするたびに、-500px margin-left で再び開始されてから移動することです。仮想ツアーの例とは異なり、写真のスムーズな流れである必要があり、停止する場所はどこですかそれは続きます。

私が試したのは、このように jquery で .after 関数を使用して写真をラップする div を挿入することです。.start と .end は、画像を囲む div のクラス名です。これにより、後でマージンの値を制御できると考えました。

$(".start").after("<div class=\"pan\" style=\"margin-left:-500px\">");
$(".end").before("</div>");

このコードは機能しませんでした。写真をラップしませんでした。

それで、この左マージンを動的にする方法について誰かアイデアや提案はありますか?