Javascript jQuery-滑块显示错误的图像

我的jQuery滑块的行为非常奇怪。隐藏第一个图像后，它会显示第二个图像，然后，当它应该加载第三个图像时，它只会再次显示第一个图像。我不知道我的代码出了什么问题。你对我有什么建议吗

jQuery代码：

jQuery(document).ready(function($) {
    var counter = 1;
    function slider() {
    counter++;
    alert(counter);
        $('.hiddenSlider').hide(500, function() {
            $('#hs'+counter+'.hiddenSlider').show(500);
        });
    }
    setInterval(slider,5000);
});

HTML代码：

<div class="sliderWindow">
    <img class="hiddenSlider" id="hs1" src="<?php echo get_template_directory_uri(); ?>/images/slider/first.jpg" />
    <img class="hiddenSlider" id="hs2" src="<?php echo get_template_directory_uri(); ?>/images/slider/second.jpg" />
    <img class="hiddenSlider" id="hs3" src="<?php echo get_template_directory_uri(); ?>/images/slider/third.jpg" />
    <img class="hiddenSlider" id="hs4" src="<?php echo get_template_directory_uri(); ?>/images/slider/fourth.jpg" />
    <img class="hiddenSlider" id="hs5" src="<?php echo get_template_directory_uri(); ?>/images/slider/fifth.jpeg" />
</div>

---

我可以试着猜问题出在哪里。 如果没有排队，动画将异步运行。 您正在启动多个动画，这可能会发生冲突。 我改变了隐藏功能，只匹配可见的项目，它似乎运行良好

jQuery(document).ready(function () {
    var counter = 1;

    function slider() {       
        $('#hs' + counter + '.hiddenSlider').hide(500, function () {
             counter++;   
            $('#hs' + counter + '.hiddenSlider').show(500);
        });
    }
    setInterval(slider, 1000);
});

小提琴

具有队列功能的备选方案：

jQuery(document).ready(function () {
    var counter = 1;

    function slider() {       
        $('#hs' + counter + '.hiddenSlider').hide(500).queue(function () {
            counter = counter % 5 + 1;                   
            $('#hs' + counter + '.hiddenSlider').show(500);                 
            $.dequeue(this);               
        });
    }
    setInterval(slider, 1000);
});

---

您的浏览器控制台中有javascript错误？@MarioAraque没有，没有错误。警报（计数器值）中有任何问题吗？我不明白为什么您的代码在第三项中失败。我看到一个错误，因为当“计数器”的值大于5时，您没有将其设置为1（它不是id为hs6的img）。警报中没有问题。我知道没有限制，但它在达到第五元素之前就失败了。

jQuery(document).ready(function () {
    var counter = 1;

    function slider() {       
        $('#hs' + counter + '.hiddenSlider').hide(500).queue(function () {
            counter = counter % 5 + 1;                   
            $('#hs' + counter + '.hiddenSlider').show(500);                 
            $.dequeue(this);               
        });
    }
    setInterval(slider, 1000);
});