javascript – Jquery图像循环问题

2023年10月23日 180次阅读

我正在为一个家庭朋友的网站工作.在它上面,他们希望在一行中拥有来自所有同事的徽标,这些徽标会微妙地淡化以替换为第一次不适合的其他徽标.

为了达到这个目的,我已经分配了< 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!
    });
});

虽然我认为你有一些滚动问题.这应该可以解决主要的骑车问题 – 所以我希望这有帮助！

点赞