Question

我正在写一个幻灯片。我终于有一个很好的功能，只显示一张幻灯片。它显示它与我想要的shoSlide等待一段时间然后隐藏幻灯片。不，我对一张幻灯片有好处，我的问题是为很多人做这件事。

function slideShow() {
    console.log("countdown Slide Count: " + numberOfSlides);

    console.log("Current slide number: " + jslideNumber);

    $('#slide' + jslideNumber).fadeIn(1000).delay(5000).queue(function (next) {
        console.log("Hiding Slide Number: " + jslideNumber);
        $('#slide' + jslideNumber).fadeOut(1000);
        next();
    });
}

slideShow();

我尝试进入WHILE循环，但使用循环WHILE或FOR导致无限计数器。我之前正在增加jslideNumber ++，但问题是循环使计数器的增加速度快于队列可以触发的速度。因此，当Slide1显示时，通常Slide1应该隐藏，但是Slide1显示然后它会在延迟赶到计数器时尝试隐藏Slide6。

Answer 1

您可以使用"[id^=slide]"选择器，$.map()，.dequeue()

var n = 150;

$.map(Array(n), function(val, index) {
  $("body").append("<div id=slide"+index+">"+index+"</div>")
})

$({}).queue("_fx", $.map($("[id^=slide]"), function(el) {
  return function(next) {
    $(el).fadeIn(1000, function() {
      $(this).delay(5000).fadeOut(1000, next)
    })
  }
})).dequeue("_fx")

[id^="slide"] {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

Jquery队列功能

1 个答案: