javascript - jquery图片循环问题

我正在为一个家庭 friend 开发一个网站。在上面，他们希望将所有同事的标志放在一行上，巧妙地褪色以替换第一次不适合的其他标志。

为了实现这一点，我分配了 <img> 的类，这些类表示它们应该出现在哪个循环中，这取决于给定当前宽度的行中将容纳多少图像。这发生在我的 assignCycleNumbers 函数中。

然后为了实际淡入淡出，我有另一个名为 cycleAssociates 的函数，它递归地淡入和淡出适当的类。理论上很好，但是它似乎不能正常工作，这特别奇怪，因为 i tested the function here 并且它工作正常。它们之间的唯一区别是现在我正在尝试动态分配周期数。

我真的很难过，可以帮忙!

您可以看到 website hosted here，如果您向下滚动到内容底部，您会在底部看到徽标，但行为不符合预期。 (第一个循环看起来不错，但随后的循环变得困惑，如果您将屏幕调整为较小的屏幕宽度，则更容易观察到)。

您可以通过浏览器彻底检查代码，但这里有您需要知道的一切，再次感谢您的任何见解。

编辑 : The whole javascript file as requested. 但所有相关内容如下:

JS:

//single global variable to represent how many logo cycles there is
var totalCycles = 0;

...

$(window).load(function() {

    ...
   totalCycles = assignCycleNumbers();
   cycleAssociates();


});

// window is resized
$(function(){
    $(window).resize(function() {
        ...
        totalCycles = assignCycleNumbers();
    });
});

...

function cycleAssociates(){
    var cycle = 0;

    var recursiveCycling = function(cycle, totalCycles){
        var currentAssociate = ".cycle" + cycle;
        //fade in all img with the current cyle class over a second,
        //wait 3 seconds before fading out over a second.
        $(currentAssociate).delay(100).fadeIn(1000).delay(3000).fadeOut(1000,
            function(){
                cycle++;
                if(cycle > totalCycles){
                    cycle = 0;
                }
                recursiveCycling(cycle, totalCycles);
            });

    };
    recursiveCycling(cycle, totalCycles);

}


function assignCycleNumbers(){
    //first remove any old cycle# classes (resized window case)
    $('[class*="cycle"]').removeClass( function(unusedIdx,c){
        return c.match(/cycle\d+/g).join(" ");
    });

    //measure div width
    var divSpace = $("#bodies").innerWidth();
    //assign a cycle number to a number of logos until no more will fit in that div
    var cycleNum = 0;
    $(".associate").each(function(){

        if( divSpace - $(this).width() > 0){
            $(this).addClass("cycle" + cycleNum);
            divSpace = divSpace - $(this).width();
        }
        else{ //next logo won't fit current cycle, create next cycle
            cycleNum++
            $(this).addClass("cycle" + cycleNum);
            divSpace = $("#bodies").innerWidth() - $(this).width();
        }
    });
    return cycleNum;
}

html:

                <img class="associate" src="IMG/spare.png" alt=""/>
                <img class="associate" src="IMG/bcs_professional.jpg" alt="BCS Professional Member"/>
                <img class="associate" src="IMG/climate_savers.jpg" alt="Climate Savers Smart Computing"/>
                <img class="associate" src="IMG/code_of_conduct.jpg" alt="Data Centres Code Of Conduct Endorser"/>
                <img class="associate" src="IMG/spare.gif" alt=""/>
                <img class="associate" src="IMG/enistic.gif" alt="Enistic"/>
                <img class="associate" src="IMG/greentrac_authorised.png" alt="Greentrac Authorised Reseller"/>
                <img class="associate" src="IMG/very_pc.jpg" alt="Very PC Approved"/>
                <img class="associate" src="IMG/spare.jpg" alt=""/>

css:

#bodies img.associate{
            float: left;
            max-width: 120px;
            max-height: 80px;
            display:none;
        }

最佳答案

问题是您的 fadeOut 函数的回调甚至在当前循环中的所有元素都淡出之前就被执行了。这是您的函数的修改版本，可以按预期工作:

function cycleAssociates(){
    var cycle = 0;
    var recursiveCycling = function(cycle, totalCycles){
        var currentAssociate = ".cycle" + cycle;
        var n = $(currentAssociate).length; //How many images in current cycle?
        $(currentAssociate).each(function() {
            $(this).delay(100).fadeIn(1000).delay(3000).fadeOut(1000, function() {
                n --;
                if(n <= 0) { //current cycle done?
                    cycle++;
                    if(cycle > totalCycles){
                        cycle = 0;
                    }
                    recursiveCycling(cycle, totalCycles);
                }
            });
        });
    };
    recursiveCycling(cycle, totalCycles);
}

要解决调整窗口大小时出现的问题，请尝试将当前的 $(window).resize 处理程序替换为:

$(function(){
    $(window).resize(function() {
        parallelNavbar();
        $(".associate").stop(); //if there are any animations, stop 'em
        $(".associate").hide(); //hide all associates
        totalCycles = assignCycleNumbers(); //update the assignment
        cycleAssociates(); //let's get cyclin' again!
    });
});

虽然我认为你在滚动方面有一些问题。不过，这应该可以解决主要的循环问题——所以我希望能有所帮助!