如何在GSAP或Javascript中以不同的时间间隔调用函数？

Question

我有一个非常基本的幻灯片，如下所示：

HTML

<div id="slideshow">
    <img class="slide" src="img/slideshow-1.png" >
    <img class="slide" src="img/slideshow-2.png" >
    <img class="slide" src="img/slideshow-3.png" >
</div>

JS

$(function(){

    var $slides = $(".slide");          //slides
    var currentSlide = 0;               //keep track on the current slide
    var stayTime = 3;                   //time the slide stays
    var slideTime = 1.3;                //fade in / fade out time

    TweenLite.set($slides.filter(":gt(0)"), {autoAlpha:0}); //we hide all images after the first one
    TweenLite.delayedCall(stayTime, nextSlide);             //start the slideshow

    function nextSlide(){                   
            TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:0} );     //fade out the old slide
            currentSlide = ++currentSlide % $slides.length;                         //find out the next slide           
            TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:1} );     //fade in the next slide
            TweenLite.delayedCall(stayTime, nextSlide);                             //wait a couple of seconds before next slide
    }

});

如您所见，它仅显示每个图像3秒钟（stayTime），然后将其淡出。 假设我想将第一张图像保留8秒，第二张图像保留6.5秒，第三张图像保留3秒。 我的意思是，对于所有图像，stayTime都不相同。 如何在GSAP或Javascript中实现？

Answer 1

一种解决方案是将stayTime转换为数组，每张幻灯片一项。

var stayTime = [8, 6.5, 3];

接着：

TweenLite.delayedCall(stayTime[currentSlide], nextSlide);