如何为每个照片/幻灯片设置不同的持续时间? (不是过渡持续时间)

问题描述

我想知道是否可以为每个幻灯片设置不同的摄影时间.

I'm wondering if it's possible to set different fotorama duration for each slide.

类似这样的东西

<div class="fotorama">
<div data-duration="3000">Content here</div>
<div data-duration="10000">Content here</div>
</div>

推荐答案

我通过听fotorama.showend事件来处理此问题:

I handled it this way, by listening to the fotorama.showend event:

在您的基本JS脚本中，包括此内容...我尚未在具有多个fotoramas的页面上对其进行测试，因此它可能会影响页面上的所有内容，因此您必须修改变量以定位特定的fotorama.

In your base JS script, include this... I haven't tested it on a page with multiple fotoramas, so it may affect all on a page, and you would have to modify the variables to target a specific 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);
            }
        )
  });

重要的是要认识到"show"和"showend"事件是特定于幻灯片的，而不是特定于幻灯片的.

It's important to recognize that the "show" and "showend" events are slide-specific, not slideshow-specific.

如果要在某些幻灯片结束后更改其他属性，例如从交叉淡入淡出切换到幻灯片过渡，或加快或减慢过渡持续时间，这也很方便.

This is also handy if you want to change other attributes after the end of certain slides, such as switching from a crossfade to slide transition, or to speed or slow the transition-duration.

如果您想在过渡开始时采取行动，请收听"fotorama:show" ...要监听的事件的完整列表，并使用来自 API页面:

If you want to act upon something at the beginning of a transition, listen to "fotorama:show"... full list of events to listen to, with console debugging code from the API page:

$(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();
  });

这篇关于如何为每个照片/幻灯片设置不同的持续时间? (不是过渡持续时间)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！