Infinite петельные вертикальный слайдер, без паузы

Question

Я написал сценарий

setInterval(function(){ 
    $('#vslides').animate({ 
    top: "-=1960" 
    }, 60000, function(){         
    $('.vslide:last').after($('.vslide:first')); 
    $('#vslides').css('top', '0px'); 
    }); 
}, 60000); 

Он работает хорошо, прокручивает почти 2000px изображение в минуту, но, в конце концов останавливается. Мне нужно это, чтобы продолжить следующий образ (одно и то же изображение, только что повторилось) и продолжайте ... Я пробовал несколько вещей, но, похоже, не понимаю. Как сделать его непрерывным и удалить стоп/паузу в конце интервала?

Answer 1

Вам нужна какая-то рекурсивная функция. Вот решение, которое обеспечивает единую функцию для анимации одного элемента, но также принимает функцию обратного вызова. Затем мы создаем вторую функцию, которая будет рекурсивно перебирать все элементы в завернутом наборе, вызывать нашу анимационную функцию и передавать обратный вызов, который увеличит наш индекс и снова вызовет нашу функцию recurse, чтобы анимировать следующий элемент.

// slides an element 
function slideIt($elem, callback) { 
    /* begin animation */ 
    $elem.animate({ 
    top: "-=1960" 
    }, 60000, function() { 

    /* animation complete do whatever you need here */ 

    if (callback) { 
     /* a callback was provided, invoke it */ 
     callback(); 
    } 
    }); 
} 

var $elems = $('.all-my-elements'); 
var index = 0; 

// slides a wrapped set of elements one at a time 
function slideRecurse() { 
    var $elem = $elems.eq(index); 
    slideIt($elems.eq(index), function() { 
    /* increment index and call slideRecurse again */ 
    index++; 
    // continue animating indefinitely 
    // we're at the end so start over 
    if (index === $elems.length) { 
     index = 0; 
    } 
    setTimeout(slideRecurse, 0); // no delay. Just using it to queue up the next call on its own stack. 
    }); 
} 

// begin sliding all of my $elems one by one 
slideRecurse();