Question

我有大约20张幻灯片，我已经分配了键盘重新分配，根据您按下的键，转到每张幻灯片。我注意到已经分配的关键命令，不要覆盖任何重要的内容（全屏，下一个，上一个等）

我遇到的问题是我可以从幻灯片1过渡到幻灯片2，从幻灯片1过渡到幻灯片3，从幻灯片1过渡到幻灯片4，等等，然后在幻灯片6或7周围，淡入淡出只是拒绝工作，它只是快速切入下一张幻灯片。我想知道我是否在初始化脚本中写错了。

Reveal.initialize({
          controls: false,
          progress: false,
          history: false,
          center: true,
          transition: 'fade',
          transitionSpeed: 'slow',
          loop: true,
          keyboard: {
                    81: function() { Reveal.slide(0) }, // Q Key
                    87: function() { Reveal.slide(1) }, // W Key
                    69: function() { Reveal.slide(2) }, // E Key
                    82: function() { Reveal.slide(3) }, // R Key
                    84: function() { Reveal.slide(4) }, // T Key
                    89: function() { Reveal.slide(5) }, // Y Key
                    85: function() { Reveal.slide(6) }, // U Key
                    73: function() { Reveal.slide(7) }, // I Key
                    219: function() { Reveal.slide(8) }, // [ Key
                    221: function() { Reveal.slide(9) }, // ] Key
                    220: function() { Reveal.slide(10) }, // \ Key
                    65: function() { Reveal.slide(11) }, // A Key
                    68: function() { Reveal.slide(12) }, // D Key
                    71: function() { Reveal.slide(13) }, // G Key
                    186: function() { Reveal.slide(14) }, // ; Key
                    222: function() { Reveal.slide(15) }, // ' Key
                    90: function() { Reveal.slide(16) }, // Z Key
                    88: function() { Reveal.slide(17) }, // X Key
                    67: function() { Reveal.slide(18) }, // C Key
                    77: function() { Reveal.slide(19); } // M Key
          },
          dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    { src: 'plugin/search/search.js', async: true },
                    { src: 'plugin/zoom-js/zoom.js', async: true },
                    { src: 'plugin/notes/notes.js', async: true }
          ]
});

关于如何正确使用.slide（）的文档充其量是平庸的。文件清楚地说明了这个电话是：

Reveal.slide( indexh, indexv, indexf );

但它实际上从未说过indexh，indexv或indexf是什么。

Answer 1

您需要将初始化选项中的viewDistance参数更改为大于幻灯片数量，例如......

Reveal.initialize({
    //...
    viewDistance: 20
});

默认情况下，“揭示”使用延迟加载的幻灯片来预加载距离特定距离的幻灯片。当前幻灯片，并卸载更远的幻灯片。这主要用于加载和卸载使用data-src属性的媒体，但它也会通过将幻灯片样式设置为display: none来隐藏幻灯片。在您的情况下，当跳转到超过3的幻灯片向前滑动时不会发生幻灯片切换，因为在转换之前未显示幻灯片。设置一个大的viewDistance将避免这种情况，但要注意这将绕过您配置的任何延迟加载媒体。

至于Reveal.slide( indexh, indexv, indexf )功能：

indexh是幻灯片的水平索引
indexv是幻灯片的垂直索引
indexf是目标幻灯片中片段的索引

当您致电Reveal.slide(1)时，您实际上并未切换到幻灯片1，但您正在更改为第二张水平幻灯片（0-indexed）。我假设您没有任何垂直幻灯片，因此索引将直接匹配数字。

Reveal.js自定义键盘绑定否定了淡入淡出过渡

1 个答案: