1

首先，我想我可能有一些语法错误，但我不知道在哪里，因为大部分代码都是从 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 很陌生，我找不到它。

这段代码的重点是移动图像，然后当它们离开容器到右侧时，脚本会提示一条消息。最终，我将使用这个触发器删除最后一个图像，并将其克隆到前面以产生轮播。不过，那是以后了。我是否正确执行此代码？

先谢谢了！

4

1 回答 1

0

在 document.ready 中检查图像是否开箱即用是不够的。您可以使用progressanimate 上的功能来获取有关动画每一步的通知。然后将您的检查包含在该功能中（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);
        }
    }
});
于 2013-07-13T09:53:59.093 回答