根据图像数量为JavaScript计时器循环设置计数器(Set up a counter for a JavaScript timer loop based on number of images)

根据图像数量为JavaScript计时器循环设置计数器(Set up a counter for a JavaScript timer loop based on number of images)

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

jQuery.noConflict(); (function($) { $(document).ready(function() { var BannerCount = $('BannerImg').length; var intervalID = window.setInterval(function() { $('.BannerImg').toggleClass("HideBannerImg"); }, 2000); }); }(jQuery));

What I would like to do is set each BannerImg element to display: none one at a time using a timer setup. Then, once I have looped through all BannerImg elements, I want to reset them to display: block. It's basically like a image rotator that I'm trying to make...but right now, I'm not sure how to target each BannerImg element one at a time--I am targeting them all at once, which is not what I want to do.

jQuery.noConflict(); (function($) { $(document).ready(function() { var BannerCount = $('BannerImg').length; var intervalID = window.setInterval(function() { $('.BannerImg').toggleClass("HideBannerImg"); }, 2000); }); }(jQuery));

最满意答案

使用.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));

Use .eq(index). You'll probably want to cache your collection to make it faster:

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