Question

我的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 code：

<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;
}

Answer 1

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

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);
});

jQuery - 滑块显示错误的图像

1 个答案: