javascript - 带 setInterval 的幻灯片

Question

我想制作一个在介绍中有带图片的幻灯片的游戏。

这是我的代码:

$("#intro-vid").bind("ended", function() {
      intro_music.play();
      $('#intro-vid').hide();
      $('#intro-img-1').fadeIn("slow");
      setTimeout(function() {
        $('#intro-img-1').fadeOut("slow");
        $('#intro-img-2').fadeIn("slow");
        setTimeout(function() {
          $('#intro-img-2').fadeOut("slow");
          $('#intro-img-3').fadeIn("slow");
          setTimeout(function() {
            $('#intro-img-3').fadeOut("slow");
            $('#intro-img-4').fadeIn("slow");
            setTimeout(function() {
              $('#intro-img-4').fadeOut("slow");
              $('#intro-img-5').fadeIn("slow");
            }, 1800);
          }, 1900);
        }, 1950);
      }, 2000);
});

我在这里做的是当介绍视频结束时，我隐藏视频、播放音乐然后显示幻灯片。

但问题是这段代码真的很大，我想创建某种 setInterval() 然后当所有图像结束时我想用 clearInterval( )

并且每张图片都有自己的 ID，并且所有图片都有一个类名，我需要每次 setTimeout() 都会越来越快

           }, 1800);
          }, 1900);
        }, 1950);
      }, 2000);

Answer 1

您可以制作一个函数来计算 setInterval 的间隔和当前显示的图像数量。

例如

$("#intro-vid").bind("ended", function() {
    intro_music.play();
    $('#intro-img-1').fadeIn('slow');
    slideShow(1950, 50, 4, 2);
});


//  Slideshow
function slideShow(interval, intervalStep, maxIterations, iteration) {

    setTimeout(function() {
        //  Do stuff
        if (iteration < 2) {
            $('#intro-img-' + iteration).fadeIn('slow');
        } else {
            $('#intro-img-' + (iteration - 1)).fadeOut('slow');
            $('#intro-img-' + iteration).fadeIn('slow');
        }

        //  Check iteration count
        if (maxIterations > 1) {
            slideShow(interval - intervalStep, intervalStep, maxIterations - 1, iteration + 1);
        }
    }, interval);

}

Working example in jsfiddle