撥動類具有間隔

我創建了這個小花哨的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的元素 - 元素沒有定義。在某些情況下，其中有兩個，另一個則有四個要素。

Check out my CodePen!

來源

2016-12-06 Jonas

試試這個

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

來源

2016-12-06 09:51:57 Pete

謝謝！工作正常。現在我添加了一個Mouseover-Event，並通過$（this）.find（「。slide-image」）獲取元素。現在發生了一些奇怪的事情：http://codepen.io/anon/pen/VmXNZj – Jonas

@Jonas這是一個新問題，但總之你需要清除你的時間間隔，因爲每次你mouseover你設置一個新的時間間隔 – Pete

您可以檢查是否當前活躍元素的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); 
});

Working Demo

來源

2016-12-06 09:55:41

撥動類具有間隔

回答

相關問題