无限循环的垂直滑块,没有暂停
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();
相关文章:
- 如何临时暂停浏览器渲染,然后恢复整个页面
- jQuery循环在特定位置暂停
- NodeJS-readline暂停和恢复事件发射器(逐行读取)
- 最小化时暂停Javascript动画
- 跟踪jqplot垂直折线图的鼠标位置
- jQuery:暂停按钮可以暂停所有其他操作
- tiltSlider播放/暂停视频元素(如果li有当前类)
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- CSS动画暂停并使用javascript播放
- 如何暂停和恢复jquery间隔
- 如何设置自定义垂直滑块Jquery的动画
- 如何在隐藏时暂停jquery计时器
- 具体化:如何只使用HTML和Javascript制作播放/暂停按钮
- 使用Jquery Issue垂直重新排序Divs
- 在 jquery 中定位暂停和播放按钮
- 暂停文档-HTML、CSS、JavaScript
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- 如何在悬停时暂停setInterval
- 暂停函数执行流程,直到ajax请求完成
- 无限循环的垂直滑块,没有暂停