Question

我有这段代码片段可以无限循环地遍历一组图像，然后从另一个图像淡入淡出。我总共有11张图片，每个图片都带有“徽标”类。

我设置了变量来控制动画的持续时间和延迟，尽管在加载第一张图像时，它会延迟一段时间，然后继续循环遍历其余图像，然后重复。 / p>

我需要立即开始播放动画，并且没有5到10秒的延迟。它没有加载问题。我已经确定了。

在我看来，它几乎好像没有在循环的第一个周期内触发动画。换句话说，在我看来，动画开始之前的初始延迟是itemInterval var的持续时间乘以循环通过的项目数。再次设置11个项目，当itemInterval设置为1500时，动画开始之前大约要延迟10秒。

是什么原因造成的，我该如何解决？谢谢！

编辑：initialFadeIn不会影响此设置，我将其设置为从1ms到10000ms，而没有任何行为改变。

function front_rotator() {
  //initial fade-in time (in milliseconds)
  var initialFadeIn = 500;
  //interval between items (in milliseconds)
  var itemInterval = 1500;
  //cross-fade time (in milliseconds)
  var fadeTime = 600;
  //count number of items
  var numberOfItems = $('.logo').length;
  //set current item
  var currentItem = 0;
  //show first item
  $('.logo').eq(currentItem).fadeIn(initialFadeIn);
  //loop through the items
  var infiniteLoop = setInterval(function () {
      $('.logo').eq(currentItem).fadeOut(fadeTime);
      if (currentItem == numberOfItems - 1) {
          currentItem = 0;
      } else {
          currentItem++;
      }
      $('.logo').eq(currentItem).fadeIn(fadeTime);
  }, itemInterval);
}
front_rotator();

我想出了如何使用Vanilla JS写出功能正确的无限循环

感谢您的帮助。：）

Answer 1

这是您要找的吗？

// initial fade-in time (in milliseconds)
var initialFadeIn = 500;
// interval between items (in milliseconds)
var itemInterval = 1500;
// cross-fade time (in milliseconds)
var fadeTime = 600;
// cache items
var items = $('.logo');
// count number of items
var numberOfItems = items.length;
// set current item
var currentItem = 0;
// helper function for animation
var fader = function(current){
  items.eq(current).fadeOut(fadeTime);

  if (current == numberOfItems - 1) {
    currentItem = 0;
  } else {
    currentItem++;
  }

  items.eq(current).fadeIn(fadeTime);
}

function front_rotator() {
  // fade the first
  fader(currentItem);
  //loop through the items
  var infiniteLoop = setInterval(function () {
    // fade the rest
    fader(currentItem);
  }, itemInterval);
}

front_rotator();

Demo

由于动画取决于setInterval延迟，因此不会立即开始播放。我将动画逻辑移到了一个辅助函数中，该函数在开始时以及每个间隔循环期间都会被调用。

如何解决此无限旋转动画循环的初始延迟？

1 个答案: