Javascript jQuery幻灯片中的第一个图像在循环后消失

这是我前几天晚上写的一篇文章的延续，我想用jQuery和HTML编写一个简单的幻灯片。虽然我之前遇到的问题已经解决了，但我现在遇到了另一个问题：我的图库中的第一张图像在循环浏览所有图像后突然消失。最初加载页面时，图像显示正确。其他图像也可以正常工作，但一旦slideImage变量重置回0，第一个图像将不再加载。我不确定是什么导致了这个问题，为什么它只适用于第一个问题。我目前正在使用带有背景颜色的div作为占位符，并已验证列表中的其他图像是否正确加载

$(document).ready(function(){
    var currentImage = 0;
    function resetCount()
    {
        if(currentImage > 2)
        {
            currentImage = 0;
        }
        if(currentImage < 0)
        {
            currentImage = 2;
        }
    };
    function slideImage()
    {
        if(currentImage == 0)
        {
            $(".img1").fadeIn(1000).show();
        }
        else
        {
            $(".img1").fadeOut(1000).hide();
        }
        if(currentImage == 1)
        {
            $(".img2").fadeIn(1000).show();
        }
        else
        {
            $(".img2").fadeOut(1000).hide();
        }
        if(currentImage == 2)
        {
            $(".img3").fadeIn(1000).show();
        }
        else
        {
            $(".img3").fadeOut(1000).hide();
        }
    };
    var autoPlay = window.setInterval(function(){
        currentImage++;
        slideImage();
        resetCount();
    }, 5000);
    slideImage();
    autoPlay;
    $("#next").mouseenter(function(){
        $(this).css("color","black");
    });
    $("#next").mouseleave(function(){
        $(this).css("color","white");
    });
    $("#back").mouseenter(function(){
        $(this).css("color","black");
    });
    $("#back").mouseleave(function(){
        $(this).css("color","white");
    });
    $("#next").click(function(){
        clearInterval(autoPlay);
        currentImage++;
        slideImage();
        resetCount();
    });
    $("#back").click(function(){
        clearInterval();
        currentImage--;
        slideImage();
        resetCount();
    });
});
</script>

<div class="slideshow">
<span id="back">Back</span>
<span id="next">Next</span>
<ul>
    <li class="img1"><img src="images/web_design.png" alt="Web Design"></li>
    <li class="img2"><div class="image"></div></li>
    <li class="img3"><div class="image"></div></li>
</ul>
</div>

$（文档）.ready（函数（）{
var currentImage=0；
函数resetCount（）
{
如果（当前图像>2）
{
currentImage=0；
}
如果（当前图像<0）
{
currentImage=2；
}
};
函数slideImage（）
{
如果（currentImage==0）
{
$（“.img1”）.fadeIn（1000.show（）；
}
其他的
{
$（“.img1”）.fadeOut（1000.hide（）；
}
如果（currentImage==1）
{
$（“.img2”）.fadeIn（1000.show（）；
}
其他的
{
$（“.img2”）.fadeOut（1000.hide（）；
}
如果（currentImage==2）
{
$（“.img3”）.fadeIn（1000.show（）；
}
其他的
{
$（“.img3”）.fadeOut（1000.hide（）；
}
};
var autoPlay=window.setInterval（函数（）{
currentImage++；
slidemage（）；
resetCount（）；
}, 5000);
slidemage（）；
自动播放；
$（“#下一步”）.mouseenter（函数（）{
$（this.css（“颜色”、“黑色”）；
});
$（“#下一步”）.mouseleave（函数（）{
$（this.css（“颜色”、“白色”）；
});
$（“#back”）.mouseenter（函数（）{
$（this.css（“颜色”、“黑色”）；
});
$（“#back”）.mouseleave（函数（）{
$（this.css（“颜色”、“白色”）；
});
$（“#下一步”）。单击（函数（）{
清除间隔（自动播放）；
currentImage++；
slidemage（）；
resetCount（）；
});
$（“#返回”）。单击（函数（）{
clearInterval（）；
当前图像--；
slidemage（）；
resetCount（）；
});
});
返回
下一个

要停止跳过第一项，您需要更改增量的顺序

当前，在调用slideImage（）之前增加，交换这两行应该可以：

var autoPlay = window.setInterval(function(){
        slideImage();
        currentImage++;
        resetCount();
    }, 5000);

---

发生这种情况的原因是，当currentImage=3时，在调用

resetCount（）

currentImage=0之后。但是由于

currentImage++

在

slideImage（）

之前，currentImage在显示之前从0变为1，因此您永远不会看到第一幅图像

要停止跳过第一项，您需要更改递增的顺序

当前，在调用slideImage（）之前增加，交换这两行应该可以：

var autoPlay = window.setInterval(function(){
        slideImage();
        currentImage++;
        resetCount();
    }, 5000);

---

发生这种情况的原因是，当currentImage=3时，在调用

resetCount（）

currentImage=0之后。但是由于

currentImage++

在

slideImage（）

之前，currentImage在显示之前从0变为1，因此您永远不会看到第一幅图像

问题在于以下代码段中函数调用的顺序

var autoPlay = window.setInterval(function(){
    currentImage++;
    slideImage();
    resetCount();
}, 5000);

您应该先调用resetCount（），然后调用slideImage（）

解释 在上面的代码段中，如果currentImage的最后一个值是2，在第一个语句之后，它将是3，那么您调用slideImage，它不做任何事情，因为没有为currentImage==3定义大小写，然后您重置计数器，使其为0

因此，交换函数调用的顺序

建议

---

使用

计数器%3

作为表达式，您不必担心重置。让计数器正常递增，并且始终取模，因此结果始终为[0,1,2]

问题在于以下代码段中函数调用的顺序

var autoPlay = window.setInterval(function(){
    currentImage++;
    slideImage();
    resetCount();
}, 5000);

您应该先调用resetCount（），然后调用slideImage（）

解释 在上面的代码段中，如果currentImage的最后一个值是2，在第一个语句之后，它将是3，那么您调用slideImage，它不做任何事情，因为没有为currentImage==3定义大小写，然后您重置计数器，使其为0

因此，交换函数调用的顺序

建议

---

使用

计数器%3

作为表达式，您不必担心重置。让计数器正常递增，你总是取模数，这样结果总是在[0,1,2]

很高兴帮助Jordan！请记住向上投票并接受此答案，以便其他人知道您的问题已得到回答。：）很高兴帮助乔丹！请记住向上投票并接受此答案，以便其他人知道您的问题已得到回答。：）