Javascript jQuery在多个元素上以间隔切换类

我创建了这个奇特的jQuery代码片段，用于在一个时间间隔内切换元素的类：

setInterval(function(){$('.grid-item .slide-image').toggleClass('active')}, 800);

剧本很好用！现在我在包装器

.grid item

中获得了多个基类为

.slide image

的元素

<div class="grid-item">
  <div class="slide-image"><img src="http://www.placehold.it/500x500/233953"></div>
  <div class="slide-image"><img src="http://www.placehold.it/500x500/03144b"></div>
  <div class="slide-image"><img src="http://www.placehold.it/500x500/030a4b"></div>
</div>

有没有办法重写代码段，使第二张

.slide image

在第一张之后获得类

.active

？然后是第三个元素等等

问题：未定义

.slide image

-元素的数量。在某些情况下有两个元素，在另一个情况下有四个元素

试试这个

var slides=$（'.grid item.slide image'），//缓存幻灯片
计数器=0；//全局计数器
setInterval（函数（）{
slides.removeClass（'active'）；//删除活动类
slides.eq（counter.addClass（'active'）；//添加active类
计数器++；
如果（计数器==slides.length）计数器=0；//在最后一张幻灯片之后重置计数器
}, 800);

---

您可以检查当前活动元素id是否为最后一个。如果是，则显示集合中的第一个元素，否则显示下一个同级元素：

$(function(){
  var slides = $('.grid-item .slide-image');
  setInterval(function(){
    var currentactive = $('.active');
   var _target = currentactive.is(':last-child') ? slides.first() : currentactive.next();
   slides.removeClass('active')
  _target.addClass('active')
 }, 800);
});

---

谢谢！很好。现在我添加了一个Mouseover事件，并通过

$（this.find（“.slide image”）

获取元素。现在一些奇怪的事情发生了：@Jonas这是一个新问题，但简而言之，每次鼠标移动到设置新的间隔时，都需要清除间隔