javascript - 根据图像数量为 JavaScript 计时器循环设置计数器

Question

我想要做的是将每个 BannerImg 元素设置为显示:使用计时器设置一次不显示一个。然后，一旦我循环遍历了所有 BannerImg 元素，我想将它们重置为 display: block。它基本上就像我正在尝试制作的图像旋转器......但现在，我不确定如何一次定位每个 BannerImg 元素 - 我一次将它们全部定位，这不是我想要的想做。

jQuery.noConflict();

(function($) {
    $(document).ready(function() {
        var BannerCount = $('BannerImg').length;

        var intervalID = window.setInterval(function() {

           $('.BannerImg').toggleClass("HideBannerImg"); 

          }, 2000);

    });

}(jQuery));

Answer 1

使用.eq(index) 。您可能需要缓存您的集合以使其更快:

(function($) {
    $(document).ready(function() {
        var $banners = $('.BannerImg'); 
        var index = 0;
        var intervalID = window.setInterval(function() {
           $banners.eq(index).toggleClass("HideBannerImg");
           index++;
           // Check to see if we've hit the end of the collection
           // If so, stop the interval.
           if (index === $banners.length) {
               clearInterval(intervalID);
           }
        }, 2000);
    });    
}(jQuery));