Javascript幻灯片放映周期正常两次，然后退出

我按照教程创建了一个简单的javascript幻灯片，但我有一个奇怪的错误。。。前两个循环工作正常，但一旦计数器重置，幻灯片放映将开始快速显示上一张幻灯片，然后尝试在正确的幻灯片中淡入。你知道这是什么原因吗

我有3张名为Image1.png、Image2.png和Image3.png的图片放在一个文件夹中，用于简单的幻灯片放映，3个div设置如下：

    <div id="SlideshowFeature">
        <div id="counter">
            3
        </div>
        <div class="behind">
            <img src="SlideShow/image1.png" alt="IMAGE" />
        </div>
        <div class="infront">
            <img src="SlideShow/image1.png" alt="IMAGE" />
        </div>
    </div>

编辑：

这也是我的CSS

#SlideshowFeature
{
text-align:center;
margin: 0 auto;
width:800px;
background: #02183B;
height:300px;
float: left;
overflow:hidden;
display:inline;

}

#SlideshowFeature div
{
    width: 800px;
    height:300px;
    position:absolute;
}

#counter
{
    display:none;
}

---

问题似乎出在HTML结构中，而不是JS中：

...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...

---

我想你是想先放image1.png，然后再放image2.png。前面必须在前面，后面必须在后面

    .behind {
        z-index: 1;
    }
    .infront {
        z-index: 255;
    }

我还将重新调度逻辑移到了fadeIn回调：

$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)});

$("#counter").html(nextImage);

//setTimeout('changeImage()', 2500);

---

现在看起来不错。

在HTML结构中有两个image1.png是正常的吗？一个更具描述性的问题标题会更好。你仍然可以编辑它。脚本对我来说很好。请在此处附加css，以查看是否导致问题，并指定浏览器版本。@VadimGulyakin我已将css添加到我的帖子中。我也使用Firefox作为我的浏览器。这很奇怪，因为它在前两个循环中都做得很好，之后的每一个循环都有问题，这让我觉得计数器的重置有问题，但我无法解决。不是这样的。前2个周期工作正常，因此这些img源代码已经由javascript更改，没有问题。不管怎样，我测试了你的建议，仍然有同样的问题。谢谢，但还是不行。。。加载时，将显示第一个图像。。。转换到第二个图像时没有问题。。。然后第一个图像在屏幕上闪烁，第三个图像开始淡入。然后在剩下的循环中重复，在下一个图像淡入时快速闪烁上一个图像。是的，你是对的。对不起，回答不正确。对于我来说，在FF中，每30-50张幻灯片中只会出现一次缺陷。在Chrome和IE 9中，它根本不可复制。这意味着该问题不在代码中，而是FF特定的视觉缺陷。

$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)});

$("#counter").html(nextImage);

//setTimeout('changeImage()', 2500);