Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在jquery fotorama中减慢或加快幻灯片之间的持续时间?

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

Stack Overflow用户
提问于 2013-10-10 12:40:53
回答 2查看 821关注 0票数 0

在fotorama中更改幻灯片之间的持续时间(时间)没有任何幸运。我可以更改转场持续时间,但不能更改图像/幻灯片之间的持续时间。我尝试在data-autoplay="3000“上更改间隔,但它不能满足我的要求。下面是我的代码:

EN

回答 2

Stack Overflow用户

发布于 2015-04-13 00:23:22

不知道这是不是你要找的..。我还在How can I set different duration for each fotorama/slide? (not transition duration)上提供了这个解决方案

如果您想在下一张幻灯片放映前更改持续时间,对于单个幻灯片...我通过侦听fotorama.showend事件以这种方式进行处理:

在您的基本JS脚本中,包含以下内容...我没有在有多个fotorama的页面上测试过它,所以它可能会影响一个页面上的所有内容,您必须修改变量以针对特定的fotorama。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(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”事件是特定于幻灯片的,而不是特定于幻灯片的,这一点很重要。

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

如果你想在过渡开始时采取行动,听一听“fotorama:show”。要侦听的事件的完整列表,以及来自API page的控制台调试代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(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();
  });
票数 0
EN

Stack Overflow用户

发布于 2013-10-23 13:34:38

数据转换持续时间=“1000”

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19296025

复制
相关文章

相似问题

Fotorama过渡持续时间

20

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

18

fotorama跳过幻灯片内容

12

如何在JavaScript中减慢和加快时间

25

如何在jquery幻灯片中设置每张幻灯片的持续时间?

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文