Question

首先，我想我可能有一些语法错误，但我不知道在哪里，因为大部分代码是从JQuery复制粘贴，然后根据我的需要修改...

$(document).ready(function() { 

var stage = $(".gallery");
var stageoffset = stage.offset();
var stageleft = stageoffset.left + 600;
var lastimage = $("img:last");
var imageoffset = lastimage.offset();
var imageleft = imageoffset.left;

if(imageleft > stageleft) {
    alert("Passed to the right.");
}

function gallery () {
    $("#image").animate({"margin-left":"+=100px"}, 1000, "linear");
}
setInterval(gallery, 1000);
});

其次，这是一个JSFiddle ......

http://jsfiddle.net/dHezM/2/

我知道动画代码是正确的，因为它运行正常。由于它没有运行，我认为存在语法错误。但是，我对JQuery很新，我找不到它。

此代码的目的是移动图像，然后当它们将容器移到右侧时，脚本将提醒消息。最后，我将使用此触发器删除最后一个图像，并在前面克隆它以生成轮播。但是，那是后来的事。我是否正确实施此代码？

先谢谢！

Answer 1

仅在document.ready上检查图像是否开箱即可。您可以在动画上使用progress函数来获取有关动画的每个步骤的通知。然后，您将检查包括在该功能中（DEMO）。

$(document).ready(function() { 
    var stage = $(".gallery");
    var stageoffset = stage.offset();
    var stageleft = stageoffset.left + 600;
    var lastimage = $("img:last");

    function gallery () {
        $("#image").animate({"margin-left":"+=100px"}, {duration: 1000, easing: "linear", progress: checkBox});
    }
    var interv = setInterval(gallery, 1000);

    function checkBox() {   
        if(!(typeof lastimage.offset() === 'undefined'))
        {
            var imageoffset = lastimage.offset();
            var imageleft = imageoffset.left;
            if(imageleft > stageleft) {
                lastimage = lastimage.prev()
                alert("Passed to the right.");
            }
        } else {
            clearInterval(interv);
        }
    }
});

检查图像是否已离开其容器？

1 个答案: