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

Question

我想做的是将每个 BannerImg 元素设置为显示：none 使用计时器设置一次一个。然后，一旦我遍历了所有 BannerImg 元素，我想将它们重置为显示：块。它基本上就像我正在尝试制作的图像旋转器...但是现在，我不确定如何一次针对每个 BannerImg 元素——我是同时针对它们，这不是我想要的想做。

jQuery.noConflict();

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

        var intervalID = window.setInterval(function() {

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

          }, 2000);

    });

}(jQuery));

Answer 1

试试这个递归函数

var images = $('.BannerImg').each();

var hideImage = function(index){
    images[index].toggleClass("HideBannerImg"); 
    if(index < images.length-1)
    setTimeout(function(){
        hideImage(index++);
    }, 2000);
}

hideImage(0);

Answer 2

调用 $('.BannerImg') 后，您需要使用 jQuery 的 each 循环遍历它选择的每个元素。

jQuery.noConflict();

(function($) {
  $(document).ready(function() {
    $('.BannerImg').each(function() {
      var $this = $(this);
      var intervalID = window.setInterval(function() {
        $this.toggleClass("HideBannerImg");
      }, 2000);
    });
  });

}(jQuery));

请注意，这将反复打开和关闭，直到您清除间隔。

Answer 3

我猜你想要类似 this 的东西（如果我错了请纠正我）：

setInterval(function () {
    if ($('.BannerImg').last().hasClass('HideBannerImg')) {
        $('.HideBannerImg').first().removeClass('HideBannerImg');
    } else {
        $('.BannerImg').not('.HideBannerImg').first().addClass('HideBannerImg');
    }
}, 1000);

Answer 4

使用.eq(index)。您可能希望缓存 collection 以使其更快：

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

Answer 5

jQuery.noConflict();

(function($) {
    $(document).ready(function() {
        var iterator = 0;
        var BannerCount = $('BannerImg').length;
        var intervalID = window.setInterval(function() {
            $('.BannerImg').eq(iterator).toggleClass("HideBannerImg");
            iterator += 1;
            if (iterator === BannerCount.length - 1) {
                clearInterval(intervalID);
                $('.BannerImg').removeClass("HideBannerImg");
            }
        }, 2000);
    });
}(jQuery));

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

Set up a counter for a JavaScript timer loop based on number of images

javascript

jquery

setinterval