Question

没有任何运气可以改变幻灯片中幻灯片之间的持续时间（时间）。我可以更改过渡时间，但不能更改图像/幻灯片之间的持续时间。我尝试在data-autoplay =＆＃34; 3000＆＃34;上更改间隔。但它没有做我想要的。这是我的代码：

Answer 1

不确定这是否是您正在寻找的......我也提供了此解决方案 How can I set different duration for each fotorama/slide? (not transition duration)

如果你想在显示下一张幻灯片之前改变持续时间，对于单个幻灯片......我通过这种方式处理它，通过收听fotorama.showend事件：

在你的基础JS脚本中，包括这个...我还没有在有多个fotoramas的页面上测试它，所以它可能会影响页面上的所有内容，你必须修改变量来定位特定的fotorama。

$(function () {
    $('.fotorama')
        /* Listen to the "showend" event... the "show" event is for the beginning of a transition, while "showend" is at the end of the transition. */
        .on('fotorama:showend',
            function (e, fotorama, extra) {
                /* do a switch on the active index + 1, if you want the current frame at base 1 instead of base 0 */
                switch (fotorama.activeIndex + 1){
                    case 2:
                        fotorama.setOptions({autoplay: 3000});
                        break;
                    case 5:
                        fotorama.setOptions({autoplay: 15000});
                        break;
                    case 6:
                        fotorama.setOptions({autoplay: 7000});
                        break;
                    case 7:
                        fotorama.setOptions({autoplay: 20000});
                        break;
                    case 8:
                        fotorama.setOptions({autoplay: 2000});
                        break;
                    default: 
                        /* You could choose to always set the autoplay to a default value here as shown, but it may be more efficient to just always set it back to default on the first slide of a "default duration" sequence (above ex. slide 2 of slides 2-4, or slide 8 of slides 8-the end), instead of setting a new autoplay value on each and every slide regardless of whether or not it's needed. */
                        fotorama.setOptions({autoplay: 2000});
                        break;
                }

                /* see the event fire in developer console, for debugging only */
                console.log('## ' + e.type);
                console.log('active frame', fotorama.activeFrame);
                console.log('additional data', extra);
            }
        )
  });

认识到＆＃34;显示＆＃34;重要的是和＆＃34; showend＆＃34;事件是特定于幻灯片的，而不是特定于幻灯片的。

如果您想在某些幻灯片结束后更改其他属性，例如从交叉渐变切换到幻灯片切换，或者加速或减慢转换持续时间，这也很方便。

如果您想在转换开始时采取行动，请通过{{3}的控制台调试代码聆听＆＃34; fotorama：show＆＃34; ...要监听的完整事件列表}：

$(function () {
    $('.fotorama')
        // Listen to the events
        .on('fotorama:ready ' +           // Fotorama is fully ready
            'fotorama:show ' +            // Start of transition to the new frame
            'fotorama:showend ' +         // End of the show transition
            'fotorama:load ' +            // Stage image of some frame is loaded
            'fotorama:error ' +           // Stage image of some frame is broken
            'fotorama:startautoplay ' +   // Slideshow is started
            'fotorama:stopautoplay ' +    // Slideshow is stopped
            'fotorama:fullscreenenter ' + // Fotorama is fullscreened
            'fotorama:fullscreenexit ' +  // Fotorama is unfullscreened
            'fotorama:loadvideo ' +       // Video iframe is loaded
            'fotorama:unloadvideo',       // Video iframe is removed
            function (e, fotorama, extra) {
              console.log('## ' + e.type);
              console.log('active frame', fotorama.activeFrame);
              console.log('additional data', extra);
            }
        )
        // Initialize fotorama manually
        .fotorama();
  });

Answer 2

数据 - 过渡持续时间= “1000”

如何减慢或加快jquery fotorama中幻灯片之间的持续时间

2 个答案: