Question

试图解决这个问题，但几个小时都没有运气......

我有

var screen1 = $('#screen');
var screen2 = $('#screen_teams');
var screen3 = $('#field_position');
. . .

screenFade(screen1,1000,1);
function screenFade(screen,delay,next) {
    if (next == 1) {
        screen.delay(delay).fadeOut(1000, function() {animation(2);console.log('2');});
    } else {
        screen.fadeIn(1000).delay(delay).fadeOut(1000, function() {animation(next);console.log(next);});
    }
}
function animation(seq) {
    if (seq == 2) {
        screenFade(screen2,2000,3);
    };
    if (seq == 3) {
        screenFade(screen3,2000,4);
    };
    if (seq == 4) {
        screenFade(screen4,2000,5);
    };
}

萤火虫输出： 2 2 3 3 4 4 五 5

你知道解决方案吗？提前谢谢！

Answer 1

我认为你最大的问题是代码的递归性质......我认为有点简化是有条不紊的。

如果您将所有“屏幕”作为父级的子元素，那么您可以轻松使用我为jQuery编写的旋转插件：

如果父元素的ID为screens且每个屏幕都是子div，那么您可以像这样使用插件：

function() rotateCallback(screenNumber, screen) {
    if(screenNumber == 4)
        callOtherFunction();
}

$(function() {
    $("#screens div").Rotate({ cycleTime: 2000, fadeTime: 1000, callback: rotateCallback});
})

在窗口加载事件中，这将选择ID为screens的父级的所有子div，然后每2秒旋转一次，超过1秒。

这是插件代码：

jQuery.fn.Rotate = function(config) {
    var currentIdx = 0;
    var items = [];
    var itemCount = this.each(function(idx, item) {
        items.push($(item));
    }).length;

    function rotateItem()
    {
        var front = items[currentIdx];
        var back = items[currentIdx = ((currentIdx + 1) % itemCount)];

        back.fadeIn(config.fadeTime);
        front.fadeOut(config.fadeTime, function() { front.hide() });

        if(config.callback)
            config.callback(currentIdx, back);
    }
    setInterval(rotateItem, config.cycleTime);
}

<强> - 更新 -

在轮播和示例中添加了回调。

Javascript - 为什么这个函数循环两次？

1 个答案: