两个javascript幻灯片实例没有循环

Question

我运行此代码以在淡入淡出幻灯片中循环播放一些div。但是当它到达div的末尾时它不会重新启动。我认为这可能与重复的函数名称或定义有关，但我不确定需要做些什么来修复它。

一旦幻灯片的实例循环就好了。

非常感谢任何帮助！

jQuery(document).ready(function($){
    var allBoxes = $("div.boxes").children("div");
    transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest(".boxes").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox(to, nextTo);
            }, 30000);
        });
    }
    
    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}

jQuery(document).ready(function($){
    var allBoxes = $("div.sideboxes").children("div");
    transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest(".sideboxes").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox(to, nextTo);
            }, 30000);
        });
    }
    
    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}

Answer 1

最后解决了它，只需要为transitionBox的第二个实例定义一个不同的名称。见下文：

jQuery(document).ready(function($){
    var allBoxes = $("div.boxes").children("div");
    transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest(".boxes").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox(to, nextTo);
            }, 30000);
        });
    }
    
    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}

jQuery(document).ready(function($){
    var allBoxes = $("div.sideboxes").children("div");
    transitionBox2(null, allBoxes.first());
});

function transitionBox2(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest(".sideboxes").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox2(to, nextTo);
            }, 30000);
        });
    }
    
    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}