javascript - 无限循环垂直滑块,没有暂停

javascript - 无限循环垂直滑块,没有暂停,第1张

我写了一个剧本

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

它很好用,在一分钟内滚动几乎2000px图像,但最后它会停止。我需要它继续下一个图像(相同的图像,只是重复)并继续...我已经尝试了几件事,但似乎无法做到正确。如何使其连续,并在间隔结束时删除停止/暂停?

最佳答案:

1 个答案:

答案 0 :(得分:2)

你需要某种递归功能。这是一个解决方案,它提供了一个动画一个元素的功能,但也接受一个回调函数。然后我们创建第二个函数,它将递归遍历包装集中的所有元素,调用我们的动画函数,并传入一个回调函数,该函数将递增索引并再次调用我们的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();
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复