Question

这是我昨晚发布的帖子的延续，寻找帮助使用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>

Answer 1

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

目前你在调用slideImage（）之前递增，交换这两行应该有效：

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

发生这种情况的原因是因为当currentImage = 3时，在你调用resetCount() currentImage = 0之后。但由于currentImage++在slideImage()之前，currentImage在之前从0变为1正在显示，所以你永远不会看到第一张图像。

Answer 2

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

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

首先应调用resetCount（），然后调用slideImage（）

<强>解释在上面的代码片段中，如果currentImage的最后一个值是2，在第一个语句之后它将是3，那么你调用slideImage，它没有做任何事情，因为没有为currentImage == 3定义的情况，然后你重置了计数器0

所以交换函数调用的顺序。

<强>建议

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

循环后jQuery幻灯片中的第一张图片消失

2 个答案: