Javascript looping issue

I know this is something easy that is just eluding me.

Anyway, I have a simple function开发者_如何学C that loops through a series of six images and text and hides and shows them based on which one is visible.

Issue I'm having is that when it gets to the last image, it should just start over with the first but instead it goes back to the middle image.

<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>

So it should go like this:

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

But what happens after 4, 5 is 3, 4. Then it goes to 5, 0.

Any ideas as to why?

You can see the behavior here: http://www.findyourgeek.com/index-copy.php

Summary: Issue was a global variable name conflict for the global variable named show between two different functions (that had nothing to do with one another) in the same page.

Seems to work fine here: http://jsfiddle.net/jfriend00/pahZx/. There must be an issue with your HTML or other code. Please show your HTML and rest of the page if you want further help.

I see you've now included a link to your actual implementation.

Edit:

OK, I can now see the issue in your actual site. I can even see it happening in the Chrome debugger. It seems to only happen the first iteration through. I don't know for sure what the issue could be, but my first guess is a global variable conflict with the variable show. I would suggest these changes:

1. Change the name of your show global variable to something a lot more unique. Perhaps there is a conflict somewhere with something else using that global name (I can come up with no other explanation for why the value would be changed from 5 to 3 between invocations of the function.
2. Add var in front of the declaration of that variable.
3. Get rid of the text in the setInterval call and refer to the function directly

This is what your code would look like:

<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>

I do see some code in your page that I think is setting a global named 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:

I can verify with a breakpoint that this other code is, indeed, setting the global variable show and that is causing a problem. If you change your global variable name to something unique, it should solve the problem. This is a classic lesson in global namespacing.

I have updated the code. here is the solution: http://jsfiddle.net/wMK6H/2/

just to summarize

 <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>

the js code:

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

I have a very similar JSFiddle to one previously posted but completely independent. The point being that the code you've provided seems to work fine. I checked out your link too....

I noticed two issues. After the last headerImage/headerText (the 6th one) the animation seems to take twice as long but does eventually rotate to the correct image. So its working but seems to take a break at the end of the sequence.

There is a ghosting of the text in the headline. Instead of using fadeOut, use hide. You have 4 animations in your function. Default time for each is 400ms so you'd think that 1600ms would finish before your next interval elapses however, maybe not?

Perhaps there is an issue with the queue where something isn't finishing correctly? Maybe things are getting screwed up in the jquery animation queue because one thing is finishing before another starts so the show++ hasn't executed.

Not sure what you're experiencing. This works fine for me: http://jsfiddle.net/wMK6H/3/

Except in my example everything is shown to begin with so you will have to let it do an initial run-through all the numbers first before you see the full effect.