1

我所拥有的是这样的长矩形图像 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>");

此代码不起作用，它没有包装照片。

那么，有人对我如何使这个左边距动态有想法或建议吗？

4

0 回答 0