[英]Infinite looped vertical slider with no pause
我写了剧本
setInterval(function(){
$('#vslides').animate({
top: "-=1960"
}, 60000, function(){
$('.vslide:last').after($('.vslide:first'));
$('#vslides').css('top', '0px');
});
}, 60000);
它工作得很好,在一分钟内滚动了将近2000px
图像,但是最后它停止了。 我需要它来继续下一个图像(相同的图像,只是重复一次)并继续前进...我已经尝试了几件事,但似乎无法正确完成。 如何使其连续,并在间隔结束时删除停止/暂停?
您需要某种递归函数。 这是一个解决方案,它为单个元素提供动画效果,但是还接受回调函数。 然后,我们创建第二个函数,该函数将递归遍历包装集中的所有元素,调用动画函数,并传递一个回调,此回调将增加索引并再次调用递归函数以使下一个元素动起来。
// 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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.