Javascript looping issue
<p>I know this is something easy that is just eluding me.</p>

<p>Anyway, I have a simple function that loops through a series of six images and text and hides and shows them based on which one is visible.</p>

<p>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.</p>

<pre><code>&lt;script type="text/javascript"&gt;
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();
}
&lt;/script&gt;
</code></pre>

<p>So it should go like this:</p>

<pre><code>Hide: 0 Show: 1
Hide: 1 Show: 2
Hide: 2 Show: 3
Hide: 3 Show: 4
Hide: 4 Show: 5
Hide: 5 Show: 0
</code></pre>

<p>But what happens after 4, 5 is 3, 4.  Then it goes to 5, 0.</p>

<p>Any ideas as to why?</p>

<p>You can see the behavior here:
<a href="http://www.findyourgeek.com/index-copy.php" rel="nofollow">http://www.findyourgeek.com/index-copy.php</a></p>
