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

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

1 个答案:

更新

更新2