【问题标题】:Jquery Cycle Plugin: How do you pause a slideshow on loadJquery Cycle Plugin:如何在加载时暂停幻灯片
【发布时间】:2009-12-04 15:01:05
【问题描述】:

我想加载一个 Jquery Cycle 幻灯片,加载后暂停,直到用户单击“播放”按钮。我是 Jquery 的新手,所以你能给我一个详细的解释和可能的示例代码吗?你可以看到我的幻灯片@www.sessomsphotographics.com

谢谢

【问题讨论】:

    标签: jquery plugins cycle


    【解决方案1】:

    您可以将字符串'pause' 发送到循环插件以暂停它,然后发送'resume' 以恢复它。

    // start cycle with default options
    $('#rotator').cycle();
    
    // immediately pause it
    $('#rotator').cycle('pause');
    
    // when the play button is clicked, resume
    $('#play-button').click(function (event) {
        event.preventDefault();
        $('#rotator').cycle('resume');
    });
    

    【讨论】:

    • 感谢这有效,但我必须双击播放链接才能开始幻灯片放映,该幻灯片放映编码为从播放切换到暂停。下面是我试过的代码。
    • $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade', timeout: 4000, speed: 500, delay: 0, pager: '#pager', prev: '#prev', next: '#next', 暂停: 1, fit: 1 }); $('#playControl').click(function () { $('#playControl') .toggle(function() { $('.slideshow').cycle('pause'); $(this).text('Play'); }), function() { $('.slideshow').cycle ('resume'); $(this).text('Pause'); } }); });
    【解决方案2】:

    您还可以设置循环选项,使其永远不会以自动前进模式启动。下载 jquery.cycle.all.2.72.js(或一些变体)的副本,并在其中搜索“$.fn.cycle.defaults = {”。将“超时”(第二个选项)设置为零。

    【讨论】:

      【解决方案3】:

      效果很好,我最终使用了这个:

      // Cycle
      $('ul#div_cycle').cycle({
          next:    '#next',
          prev:    '#prev', 
          fx:     'scrollHorz', 
          timeout: 2000, 
          delay:  -3500,
          pause: 1
      });
      
      // Pause cycle
      $('ul#div_cycle').cycle('pause');
      

      【讨论】:

        【解决方案4】:

        您可以在准备就绪时向其发送“暂停”消息:

        $(document).ready(function() {                     
            $('.slideshow').cycle('pause'); 
            });
        });
        

        【讨论】:

        • 谢谢 这也有效。我仍然有一点问题。请参阅上面的我的 cmets。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多