Jquery 链接无限循环演示的动画序列

Jquery 链接无限循环演示的动画序列,jquery,html,loops,presentation,Jquery,Html,Loops,Presentation,我正在编写一个演示文稿,在办公室接待区的电视上播放,需要一些帮助 我已经尝试了很多答案来试图解决这个问题,但没有一个答案与我的情况特别相关。我已经花了好几天的时间试图解决这个问题,我准备退出 以下是脚本的主要部分: var startDelay = 5; // time in seconds before the directors image sequence begins (default 120 secs) var cycleDelay = 10; // t

我正在编写一个演示文稿,在办公室接待区的电视上播放,需要一些帮助

我已经尝试了很多答案来试图解决这个问题,但没有一个答案与我的情况特别相关。我已经花了好几天的时间试图解决这个问题,我准备退出

以下是脚本的主要部分:

    var startDelay =  5;   //  time in seconds before the directors image sequence begins (default 120 secs)
    var cycleDelay = 10;     // time in seconds after the end of director bios sequence completes and the directors image sequence begins again (default 240 secs)
    var biosDelay =  2;     // time in seconds to show each of the director bios in the carousel (default 10 secs, with total squence time 60 secs)

// start the directors image sequence after a few seconds
    //var tid = window.setTimeout(playDirectors, (startDelay*1000));
    // this was commented out to eliminate interval/timeout problems
    // the presentation is started at the bottom of the script
    // by calling the playDirectors() function immediately, 
    // instead of after the startDelay period

// directors slideshow 
    function playDirectors(){
    //alert("playDirectors");

    // fade out the white client list
        $('#client-qtrotator').fadeTo(500,0, function(){ 
            $("#client-qtrotator").cycle("pause");
         }); 

    // fade up the directors image container then begin image ripple sequence
        $("#directors").fadeTo(500,1,imgFader);
    };

// begin directors image ripple sequence
    function imgFader(){ 
        // label each photo using the alt text        
            $('.banner li img').each(function(i){
                var imageAlt = $(this).attr("alt");
                $(this).after("<span class='caption'>"+imageAlt+"</span>");
             });

        var elm = $('#directors ul.banner li');

        $( elm ).each(function( n ) {
            $( this ).delay(500*n).fadeTo(1000,1).delay(5000).fadeTo(1000,0);
            });

        var def = $(elm).promise();
            def.done(
               function () {
                  //alert('done');
                  playDirectorsBios();
            });

    };

// directors bios slideshow 
    function playDirectorsBios(){
        //alert("playDirectorsBios");

        // fade out directors image container
            $("#directors").fadeTo(500,0);

        // fade in the directors bios carousel
            $('#directors-bios').fadeTo(500,1);//.delay(19000).fadeTo(500,0, alert("done!"));

        // begin cycling through the director bios
            $('.cycle-bios').cycle({
                fx: "scrollHorz",
                slides: "> div",
                loop: 1,
                timeout: biosDelay*1000
            });

        // when the bios have finished playing
            $( '.cycle-bios' ).on( 'cycle-finished', function( event, opts ) {
                // alert("bios finished");
                $(this).cycle('pause'); 

                // fade out  the directors bios carousel
                $('#directors-bios').fadeTo(500,0, function() {
                       // animation complete
                       // $('#client-qtrotator').delay(1000).fadeTo(500,1);
                       $('.cycle-bios').cycle('destroy');

                    var def2 = $('#directors-bios').delay(cycleDelay*1000).promise();
                        def2.done(
                           function () {
                              //alert('done bios');
                              playDirectors();
                        });

                // fade the cloud back in
                    $("#myCanvasContainer").delay(500).fadeTo(2000,1);

                // fade the client list back up
                    $('#client-qtrotator').delay(1000).fadeTo(500,1, function(){ 
                        $("#client-qtrotator").delay(500).cycle("resume"); // resume the client list cycle
                 });  

            });
    };

// begin the presentation by playing the directors image slideshow
playDirectors();
基本上,每幅图像都会在500毫秒内淡出,等待3000毫秒,然后在500毫秒内淡出-我需要在最后一幅图像淡出后启动下一个功能

在浏览了上的文档和示例之后,我无法在动画完成后触发函数


我应该如何重写上述代码来实现这一点?

我在项目中使用的帮助我完成计时和链接序列的方法是

只要通读课文,你就会掌握好时机

下面是更详细的文档


只需忽略R主题,只需使用普通javascript即可。它对我有用,所以它也应该对你有用。

我知道你很难让它奏效。我也很乐意私下分享我项目的链接。这是一个机密项目,所以我不能公开分享。感谢您的帮助agentpx,我已回复到“jquery计时”,因为“计时管理器”是我的头号问题。我已经对我的原始问题进行了更新-如果你不介意的话,你能解释一下在序列完成后如何触发函数吗?我相信你需要触发的函数也必须包含在序列中。原因是如果不将动画添加到序列中,动画将与要触发的函数一起执行。如果你能告诉我你对图书馆的挑战,我可以帮你安排时间。
$('#directors ul.banner li').each($).animate({ opacity:1 },500,$).wait(event).all().wait(3000).each($).animate({ opacity:0 },500,$);