Question

我有一个非常奇怪的问题，一些jquery代码滚动了一组图像。它似乎适用于所有浏览器的前几次点击，通过数字推进图像。在Safari中，它将一直完美地运行到幻灯片结束。但在FF和Chrome中，它会在一定数量的图像后停止。由于某些原因，这个数字并不总是相同的。

例如，在this页面上FF / Chrome将在点击下一个箭头7次后停止。

在this页面上，点击下一个箭头6次后，FF / Chrome将停止。

然而，在this页面上，FF / Chrome会按预期一直工作到最后（并且Safari会一直这样做）。

这是控制点击的代码：

<script>$(window).load(function(){
var currentElement = $("#ngg-gallery-list > div:nth-child(2)");
var onScroll = function () {
    //get the current element
    var container = $("#ngg-galleryoverview");
    var wrapper = $("#ngg-gallery-list");
    var children = wrapper.children();
    var position = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            return;
        }
    }
}

var scrollToElement = function ($element) {
    var container = $("#ngg-galleryoverview");
    var wrapper = $("#ngg-gallery-list");
    var children = wrapper.children();
    var width = 0;
    console.log(children.length);
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);

        if (child.get(0) == $element.get(0)) {
            if (i == 0) {
                width = 300;
            }
            container.animate({
                scrollLeft: width
            }, 300);
            onScroll();
        }
        if (child.next().length > 0) {

            //make sure we factor in borders/padding/margin in height
            width += child.next().offset().left - child.offset().left
        } else {
            width += child.width();

        }
    }
}

var next = function(event) {
    event.preventDefault();
    scrollToElement(currentElement);
}

var prev = function(event) {
    event.preventDefault();
    var container = $("#ngg-galleryoverview");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
}

$("#ngg-galleryoverview").on('scroll', onScroll);
$("#nexty").click(next);
$("#prevy").click(prev);
});
</script>

我很难过。

Answer 1

好吧，让我的代码看起来更像我发现here解决了问题。（即使我不完全确定为什么）。希望它可以帮助其他人，这是最终的代码：

<script>
$(document).ready(function () {

var currentElement = $("#ngg-galleryoverview > div:nth-child(1)");

var onScroll = function () {
    var container = $("#ngg-galleryoverview");
    var children = $(".list");
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            //console.log(currentElement);
            return;
        }
    }
};

var scrollToElement = function ($element) {
    var container = $("#ngg-galleryoverview");
    var children = $(".list");
    var width = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        if (child.get(0) == $element.get(0)) {
            if (i === 0) {
                width = 0;
            }
            container.animate({
                scrollLeft: width
            }, 500);
            onScroll();
        }
        if (child.next().length > 0) {
            width += child.next().offset().left - child.offset().left;
        } else {
            width += child.width();
        }
    }
};

var buttonright = function (e) {
        scrollToElement(currentElement.next());
    };

var buttonleft = function (e) {
    var container = $("#ngg-galleryoverview");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
};

    onScroll();
$("#ngg-galleryoverview").scroll(onScroll);
$("#nexty").click(buttonright);
$("#prevy").click(buttonleft);

});</script>

在FF和Chrome中点击几次后，jQuery animate scrollLeft停止工作（但不是Safari）

1 个答案: