Функция jQuery setInterval - PullRequest
12 голосов
/ 14 июля 2011
$(document).ready(function(){

    setInterval(swapImages(),1000);

    function swapImages(){

        var active = $('.active'); 
        var next = ($('.active').next().length > 0) ? $('.active').next() : $('#siteNewsHead img:first');

        active.removeClass('active');
        next.addClass('active');
    }
});

У меня есть 13 изображений, содержащихся в div.У первого есть класс с именем active, что означает, что он отображается.

Функция обмена изображениями выбирает активное изображение, скрывает его и делает следующее изображение активным.

Однако при загрузке страницы функция работает правильно только один раз, а не зацикливается.

Есть идеи?

Ответы [ 5 ]

26 голосов
/ 14 июля 2011

Это потому, что вы выполняете функцию, а не ссылаетесь на нее.Вы должны сделать:

  setInterval(swapImages,1000);
8 голосов
/ 14 июля 2011

Не передавайте результат swapImages в setInterval, вызывая его.Просто передайте функцию следующим образом:

setInterval(swapImages, 1000);
2 голосов
/ 24 февраля 2014

// простой пример с использованием концепции setInterval

$(document).ready(function(){
var g = $('.jumping');
function blink(){
  g.animate({ 'left':'50px' 
  }).animate({
     'left':'20px'
        },1000)
}
setInterval(blink,1500);
});
0 голосов
/ 14 июля 2011

попробуйте объявить функцию вне события готовности.

    $(document).ready(function(){    
       setInterval(swapImages(),1000); 
    });


    function swapImages(){

    var active = $('.active'); 
    var next = ($('.active').next().length > 0) ? $('.active').next() :         $('#siteNewsHead img:first');
    active.removeClass('active');
    next.addClass('active');
}
0 голосов
/ 14 июля 2011

Вы можете использовать его так:

$(document).ready(function(){

    setTimeout("swapImages()",1000);

    function swapImages(){

        var active = $('.active'); 
        var next = ($('.active').next().length > 0) ? $('.active').next() : $('#siteNewsHead img:first');

        active.removeClass('active');
        next.addClass('active');
        setTimeout("swapImages()",1000);
}

});

...