我正在为一个家庭 friend 开发一个网站。在上面，他们希望将所有员工的 Logo 排成一排，这些 Logo 会微妙地褪色，以替换为第一次不适合的其他 Logo 。
为了实现这一点，我分配了 <img>的类，表示它们应该出现在什么周期中，具体取决于在给定当前宽度的情况下，这些图像中有多少适合该行。这发生在我的 assignCycleNumbers功能。
然后为了让它们真正淡入淡出，我有另一个函数叫做 cycleAssociates它递归地淡入淡出适当的类。理论上不错，但它似乎无法正常工作，这特别奇怪，因为 i tested the function here它工作正常。它们之间的唯一区别是现在我正在尝试动态分配周期数。
我真的很困惑，需要一些帮助!
你可以看到 website hosted here如果您向下滚动到内容的底部，您会在底部看到 Logo ，这与预期的不一样。 (第一个循环看起来不错，但随后的循环变得困惑，如果您调整到较小的屏幕宽度则更容易观察到)。
您可以通过浏览器彻底检查代码，但这里有您需要了解的所有信息，我再次非常感谢任何见解。
编辑: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!
});
});
尽管我认为您在滚动方面遇到了一些问题。不过，这应该可以解决主要的循环问题——希望对您有所帮助!
关于javascript - Jquery 图像循环问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12139917/