jQueryのは、私は区間内の要素のクラスを切り替えるには、この少し派手なjQueryのスニペットを作成した間隔

Question

持つ複数の要素にクラスを切り替え！今では、ラッパーの基底クラスを持つ複数の要素が得られました.grid-item。

<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は最初の1の後にクラス.activeを取得するように、スニペットを書き換える方法はありますか？次に、3番目の要素など...

問題：.slide-imageの要素は定義されていません。場合によっては2つあり、別の要素には4つの要素があります。

Check out my CodePen!

Answer 1

現在アクティブな要素のidが続くかどうかをチェックすることができます。この

var slides = $('.grid-item .slide-image'), // cache slides 
    counter = 0;       // global counter 

setInterval(function(){ 
    slides.removeClass('active');    // remove active class 
    slides.eq(counter).addClass('active'); // add active class 
    counter++; 

    if (counter == slides.length) counter = 0; // reset counter after last slide 
}, 800); 

Updated CodePen

Answer 2

を試してみてください。それがある場合は、設定され、他のショーの最初の要素を示し、次の兄弟要素：

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

Working Demo