Question

我有一个幻灯片运行与令人敬畏的循环插件，当你点击节目中的一个按钮，我在页面上显示一个隐藏的图层，并发送'暂停'命令循环。我有两个问题：

当收到暂停命令时，循环立即翻转回序列中的第一张幻灯片（为什么??），并且没有点击我之前/之后的回调。
关闭图层后，我发送'resume'命令进行循环。幻灯片继续播放（从第一张幻灯片开始，暂停离开它），但现在循环根本不会调用我之前/之后的回调，即使幻灯片显示进展。

所以我想我的问题是：如何才能正确暂停/恢复幻灯片放映，以免出现这些奇怪的行为？（并且为了完全清楚并避免任何混淆，这不是关于“暂停悬停”功能，这实际上对我来说很好。： - ）

这是我的cycle（）init和我的回调函数。（为什么我要手动跟踪nextSlide，你问？因为当前幻灯片的内置值没有为前/后回调正确更新。）

  $(document).ready(function() {
    $('#slideshow').cycle({
      fx: 'fade',        // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout:       4000,  // milliseconds between slide transitions (0 to disable auto advance)
        speed:         1000,  // speed of the transition (any valid fx speed value)
        pause:         1,     // true to enable "pause on hover"
        delay:         0,     // additional delay (in ms) for first transition (hint: can be negative)
        slideExpr:     'img',  // expression for selecting slides (if something other than all children is required)
        before:       moveArrow, // function to call when moving to next slide
        after:       upd, // function to call when moving to next slide
        fastOnEvent:   'fast',
    });
  });

  var nextSlide = 0;

  function upd(a, b, c) {
    nextSlide = nextSlide + 1;        // track which slide we're on
    c = $('#slideshow img').length;
    if(nextSlide > (c - 1)) nextSlide = 0;   // wrap back to 1st
  }

  // move indicator showing which slide we're on
  function moveArrow(a, b, c) {
    $('#slide-indicator').attr('class', 'c'+nextSlide);

    $(".clickmap").hide();          // hide other clickmaps
    $(".clickmap.c"+nextSlide).show();    // show map for this slide

    return true;
  }

感谢您对此的任何想法 -

最好的，埃里克

Answer 1

我有同样的问题，暂停和恢复无法正常工作。看来我已经安装了Lite版本，它的完整/完整版本正在运行。

Answer 2

您没有显示发送暂停命令的代码。有些东西肯定是错误的，因为暂停不会将幻灯片重置为第一张幻灯片。

此外，您无需自己跟踪幻灯片索引。回调之前/之后的第三个参数是具有幻灯片显示内部状态的选项对象。在该对象上，您将找到'currSlide'和'slideCount'属性等等。

Answer 3

我知道这是一个老问题，但我遇到了同样的问题。我解决它的方法是简单地创建我自己的函数来暂停和恢复使用JQuery的悬停事件的幻灯片。

正如Eric在一些评论中所指出的，一个相关的问题是插件的暂停选项只允许悬停在IMG元素上暂停幻灯片放映，所以如果你的图像上有任何东西，比如寻呼机或任何装饰元素，然后你就是骨头。

所以，我将我的装饰元素，横幅（我称之为“#banner”）和寻呼机全部放入一个名为“＃banner-container”的div中，然后应用此代码来解决我的问题：

$('div#banner-container').hover(function(){
   if(!$(this).hasClass('paused')){
       $(this).addClass("paused");
       $('div#banner').cycle("pause")
   }
},function(){
   if($(this).hasClass('paused')){
       $(this).removeClass("paused");
       $('div#banner').cycle("resume")
   }
});

Answer 4

问题在于JQuery Cycle Plugin版本：“lite”版本忽略了pause / resume命令。使用完整版可以解决问题。

编辑：对不起，我错了：我尝试了两个版本，但使用完整版本时遇到了同样的问题。

jQuery Cycle插件 - 暂停/恢复奇怪的行为

4 个答案: