Question

我希望下面的代码会改变滑块上的图像。当到达最后一张图像时，需要从第一张图像重新开始幻灯片放映，依此类推到无限远。

function launchSlider(){
  for (let i = 0; i<imagesCount; i++) {
    console.log(i);
    // The cross fading
    $allSliderImages.eq(i).fadeOut(CROSS_FADING_DURATION, 'swing'); 
    $allSliderImages.eq(i+1).fadeIn(CROSS_FADING_DURATION, 'swing');  

    // when the next image will be last in jQuery selection, we need to reset the counter
    // (in the entry to next iteration will be: i = -1 + 1 = 0)
    if (i === imagesCount - 1) {
      i = -1;
    }
  }
}

在此解决方案中，它在动画完成之前进入下一次迭代，因此它每秒执行多次迭代。当然，浏览器是冻结的。

当交叉淡化动画完成时，如何进入下一次迭代？

Answer 1

您不能只使用for，即同步代码。您可以使用回调链。代码如下：

let i = 0;
let j = 1;
var temp = function () {
    $allSliderImages.eq(i).fadeOut(CROSS_FADING_DURATION, () => {
    });
    $allSliderImages.eq(j).fadeIn(CROSS_FADING_DURATION, () => {
        if (i == imagesCount - 1) {
            i = 0
        }
        i++;
        j++
        temp();
    });
}

Answer 2

您可以使用解决方案

function launchSlider(){
  var i = 0;
  while( i < imagesCount) {

    // The cross fading
    $allSliderImages.eq(i).fadeOut(CROSS_FADING_DURATION, 'swing'); 
    $allSliderImages.eq(i+1).fadeIn(CROSS_FADING_DURATION, 'swing');  

    if (i === imagesCount - 1) {
      i = 0;
    } else {
      i++;
    }
  }
}

每次检查i的值，如果i值与imageCount长度匹配，则将i值重置为0.

希望这会对你有所帮助。

JavaScript＆amp; jQuery：动画完成后转到下一个循环迭代

2 个答案: