滑块显示错误的图像

jQuery - slider displays wrong images

本文关键字：图像 错误 显示      更新时间：2023-09-26

我的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>
CSS: 

.hiddenSlider {
    display:none;
}
.hiddenSlider:first-child {
    display:inline-block;
}

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

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

小提琴 http://jsfiddle.net/Drea/orxpf1vk/

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

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);
});
相关文章：