如何在 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 秒。我的意思是所有图像的停留时间都不相同。我怎样才能在 GSAP 或 Javascript 中实现这一点？

Answer 1

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

var stayTime = [8, 6.5, 3];

然后：

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

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

How to call a function at different intervals in GSAP or Javascript?

javascript

timing

gsap