Question

我知道这很容易让我不知所措。

无论如何，我有一个简单的函数，它循环显示一系列六个图像和文本，并根据哪一个可见而显示它们。

我遇到的问题是，当它到达最后一个图像时，它应该从第一个图像开始，但它会返回到中间图像。

<script type="text/javascript">
setInterval('testAnimation()', 5 * 1000);
show = 0;
function testAnimation() {
    $("#headerImage" + show).fadeOut();
    $("#headerText" + show).fadeOut();
    if (show == 5) {
        show = 0;
    }
    else {
        show++;
    }
    $("#headerImage" + show).fadeIn();
    $("#headerText" + show).fadeIn();
}
</script>

所以它应该是这样的：

Hide: 0 Show: 1
Hide: 1 Show: 2
Hide: 2 Show: 3
Hide: 3 Show: 4
Hide: 4 Show: 5
Hide: 5 Show: 0

但是在4,5之后会发生什么是3,4。然后它会转到5,0。

关于为什么的任何想法？

您可以在此处查看此行为： http://www.findyourgeek.com/index-copy.php

Answer 1

摘要：问题是同一页面中两个不同功能（彼此无关）之间名为show的全局变量的全局变量名称冲突。

似乎在这里工作正常：http://jsfiddle.net/jfriend00/pahZx/。您的HTML或其他代码一定存在问题。如果您需要进一步的帮助，请显示您的HTML和页面的其余部分。

我发现你现在已经包含了实际实施的链接。

修改

好的，我现在可以在您的实际网站中看到此问题。我甚至可以在Chrome调试器中看到它。它似乎只发生在第一次迭代中。我不确定问题是什么，但我的第一个猜测是与变量show的全局变量冲突。我会建议这些改变：

将show全局变量的名称更改为更独特的名称。也许在使用该全局名称的某个地方存在冲突（我无法解释为什么在函数调用之间将值从5更改为3的原因。

在该变量的声明前添加var。

删除setInterval来电中的文字并直接参阅该功能

这就是您的代码的样子：

<script type="text/javascript"> setInterval(testAnimation, 5 * 1000); var mySlideshowCntr = 0; function testAnimation() { $("#headerImage" + mySlideshowCntr).fadeOut(); $("#headerText" + mySlideshowCntr).fadeOut(); if (mySlideshowCntr == 5) { mySlideshowCntr = 0; } else { mySlideshowCntr++; } $("#headerImage" + mySlideshowCntr).fadeIn(); $("#headerText" + mySlideshowCntr).fadeIn(); } </script>

我确实在页面中看到了一些我认为正在设置全局名为show的代码：

// ( main ) index.php otherSpotlightTimer = 0 function refreshOtherSpotlight() { if (!$("#login").is(":visible")) { if (otherSpotlightTimer<=3) { otherSpotlightTimer++; $("#otherSpotlight"+otherSpotlightTimer).hide(); switch (otherSpotlightTimer) { case 1:show=2;break; case 2:show=3;break; case 3:show=1;break; } $("#otherSpotlight"+show).fadeIn(); } if (otherSpotlightTimer > 3) { $('.qtip').each(function(){$(this).qtip("api").destroy()}); $.post("/scripts/refreshotherspotlight.php", { fromsubmit : "true" }, function(data) { if (data != "") { $("#otherSpotlight1").hide(); $("#otherSpotlight1").html(data); $("#otherSpotlight1").fadeIn("slow"); //height = $("#otherSpotlight").height(); //$("#otherSpotlight").css('min-height', height+'px'); } } ); } attachqTips(); } }

<强> EDIT2：

我可以使用断点验证这个其他代码确实是设置全局变量show并且导致问题。如果将全局变量名称更改为唯一的名称，则应解决该问题。这是全局命名空间的经典课程。

Answer 2

不确定您遇到了什么。这对我来说很好：http://jsfiddle.net/wMK6H/3/

除了在我的示例中，所有内容都以开头显示，所以在看到完整效果之前，您必须先让所有数字先进行初始化。

Answer 3

我已经更新了代码。这是解决方案：http://jsfiddle.net/wMK6H/2/

总结

 <div id="headerImage1" class="image">1</div>
<div id="headerImage2" class="image" style="display:none">2</div>
<div id="headerImage3" class="image" style="display:none">3</div>
<div id="headerImage4" class="image" style="display:none">4</div>
<div id="headerImage5" class="image" style="display:none">5</div>
<div id="headerImage6" class="image"  style="display:none">6</div>

js代码：

setInterval(testAnimation, 5000);
show = 1;
function testAnimation()
{
$(".image").fadeOut();
if (show == 5) 
    { show = 0; } 
else 
    { show++; }
$("#headerImage" + show).fadeIn();
$("#headerText" + show).fadeIn();
}

Answer 4

我有一个非常相似JSFiddle到一个之前发布但完全独立的人。关键是您提供的代码似乎工作正常。我也检查了你的链接......

我注意到两个问题。在最后一个headerImage / headerText（第6个）之后，动画似乎需要两倍的时间，但最终会旋转到正确的图像。所以它的工作，但似乎在序列结束时休息。

标题中的文字有重影。而不是使用fadeOut，使用隐藏。您的函数中有4个动画。每个的默认时间是400毫秒，所以你认为1600毫秒会在你的下一个间隔过去之前完成，但也许不是吗？

队列中可能存在某些问题无法正确完成的问题？也许事情在jquery动画队列中搞砸了，因为有一件事在另一件事开始之前完成，所以show ++还没有执行。

Javascript循环问题

4 个答案: