javascript - 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能够使用 $ 函数的库。

参见 updated fiddle

更新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。

参见 updated fiddle