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

Question

我有一个使用很棒的循环插件运行的幻灯片，当您单击演示中的按钮时，我会在页面上显示一个隐藏层并发送“暂停”命令来循环。我遇到两个问题：

1. 当收到暂停命令时，循环立即翻转回序列中的第一张幻灯片（为什么？），并且不会触发我的之前/之后回调。

2. 关闭图层后，我发送一个“恢复”命令来循环。幻灯片恢复（从第一张幻灯片开始，暂停处），但现在循环根本不调用我的之前/之后回调，即使幻灯片正在进行。

所以我想我的问题是：如何正确暂停/恢复幻灯片放映，以免发生这些奇怪的行为？ （为了完全清楚并避免任何混淆，这与“悬停时暂停”功能无关，该功能实际上对我来说工作得很好。:-)

这是我的 Cycle() init 和我的回调函数。 （您可能会问，为什么我要手动跟踪下一张幻灯片？因为当前幻灯片的内置值无法针对之前/之后的回调正确更新。）

  $(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

我遇到了同样的问题，暂停和恢复不起作用。看起来我已经安装了精简版，完整/完整版本正在运行。

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”版本忽略暂停/恢复命令。使用完整版可以解决这个问题。

编辑：抱歉，我错了：我尝试了两个版本，但使用完整版本时遇到了相同的问题。