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