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

Question

我想要做的是设置每个BannerImg元素显示:使用计时器设置一次一个.然后,一旦我循环遍历所有BannerImg元素,我想重置它们以显示: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));