impress.js中的自定义转换时序

Question

我试图为impress.js演示文稿中的每一张幻灯片创建不同的转换时间。我在一本关于impress.js的书中找到了下面的代码。但是在JSLint上检查它会显示错误。我在javascript方面还不够好，无法自己纠正这一点。有人愿意帮我吗？

• 编辑:我需要一个没有jQuery的解决方案。这是因为impress.js允许您使用空格键和箭头键浏览演示文稿，我不想失去该功能。

我发现，当使用键导航时( jQuery正在计时自动前进)，它并不尊重您导航到的位置，而是迫使您远离您所在的位置。我想要的是，如果您导航到一个幻灯片(位置)，自动前进开始运行该特定幻灯片的自定义设置时间，并前进到下一个幻灯片时，设定的时间已经过去。这将是对impress.js的一个很棒的补充。我希望能做到这一点。谢谢你的努力！

JSFiddle：http://jsfiddle.net/5sSE5/8/ (在impress.js末尾添加的脚本)

    var step_transitions = [
        { "slide": 1, "duration": 2000 },
        { "slide": 2, "duration": 4000 },
        { "slide": 3, "duration": 1000 }
    ];

$(document).ready(function () {
            var time_frame = 0;
    step_transitions.filter(function (steps) {
        time_frame = time_frame + steps.duration;
        setTimeout(function () {
            api.goto(steps.slide);
        }); time_frame;
    });
});

添加:下面的脚本尊重键盘导航，但是所有的幻灯片都有相同的转换时间。

    var impress = impress();
  impress.init();

  document.addEventListener('impress:stepenter', function(e){
    if (typeof timing !== 'undefined') clearInterval(timing);
    var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 10000); // in ms
    timing = setInterval(impress.next, duration);
  });

Answer 1

在setTimeout中的代码中有一个错误：

setTimeout(function () {
    api.goto(steps.slide);
}, time_frame);

似乎time_frame变量应该是setTimeout方法的第二个参数。

更新

您还忘记在使用api变量之前初始化它：

var api = impress();

您还需要jQuery库才能使用$函数。

请参阅更新小提琴

更新2

我重新编写了您的代码，使其在到达最后一个幻灯片后从第一个幻灯片继续运行：

var step_transitions = [
    { "slide": 0, "duration": 3000 },
    { "slide": 1, "duration": 4000 },
    { "slide": 2, "duration": 2000 }
];

$(document).ready(function () {
    var time_frame = 0,
    api = impress(),
    current_step_index = 0,

    do_transition = function (){
        var step = step_transitions[current_step_index];
        api.goto(step.slide);
        current_step_index++;
        if(current_step_index >= step_transitions.length){
            current_step_index = 0;
        }
        setTimeout(do_transition, step.duration);
    };

    //initial run
    do_transition();
});

注意，幻灯片必须从0开始，而不是从1开始。

请参阅更新小提琴