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

【问题标题】：jQuery Cycle plugin - pause/resume weird behaviorjQuery Cycle 插件 - 暂停/恢复奇怪的行为
【发布时间】：2010-07-20 03:09:40
【问题描述】：

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

收到暂停命令后，循环立即翻转回序列中的第一张幻灯片（为什么？？），并且不会触发我之前/之后的回调。
关闭图层后，我发送“恢复”命令循环。幻灯片继续播放（从第一张幻灯片开始，暂停的地方），但现在循环根本不会调用我的之前/之后回调，即使幻灯片正在进行。

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

这是我的循环（）初始化和我的回调函数。（你问我为什么要手动跟踪下一张幻灯片？因为当前幻灯片的内置值在之前/之后的回调中没有正确更新。）

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

感谢您对此的任何想法--

最好，埃里克

【问题讨论】：

我也遇到了这个问题。希望有人能解答。
我想出了一个 hacky 解决方法，它也可能对您有用 - 但需要帮助才能使解决方法正确运行。 Argh :-) 你可以在这里看到我的问题：stackoverflow.com/questions/3295185/…
我越来越近了——我认为部分问题是 Mac Firefox 的某种问题。我在这里用非常简单的代码设置了一个文本页面：themepark.com/eric

标签： jquery jquery-plugins jquery-cycle

【解决方案1】：

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

【讨论】：

【解决方案2】：

您没有显示发送暂停命令的代码。那里肯定有问题，因为暂停不会将幻灯片重置为第一张幻灯片。

此外，您不需要自己跟踪幻灯片索引。 before/after 回调的第三个参数是具有幻灯片内部状态的选项对象。在该对象上，您会发现 'currSlide' 和 'slideCount' 属性等等。

【讨论】：

感谢您的提示：currSlide。我以前用过，结果有些奇怪，但我又试了一次，现在很好，所以也许我以前犯了一个错误。此外，我进行了更多测试，并查看了部分情况。当调用 cycle('pause') 时，#slideshow div 中的所有元素都设置为“top: 0; left: 0; position: absolute; display: none; opacity: 0”，每个元素的 z-index 为重置为好。（续）
这导致了我所看到的一些行为：我在幻灯片上放置了几层，所以这解释了第一张幻灯片重新出现的原因。部分原因是，在我的#slideshow div 中，我有其他 div（不是幻灯片的一部分，但需要在其中），所以当我设置 cycle() 时，我告诉它只选择 IMG #slideshow div 内的元素。但我认为在“暂停”时它会忽略这一点，只是重置那里的所有内容。
这里发生了一些不同的事情，这个线程变得有点疯狂，但 FWIW 我发现 Mac Firefox 有一个问题，这可能有助于解释至少一些奇怪之处。从 Mac Firefox 尝试themepark.com/eric...

【解决方案3】：

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

正如 Eric 在几个 cmets 中指出的那样，一个相关的问题是插件的暂停选项只允许将鼠标悬停在 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")
   }
});

【讨论】：

【解决方案4】：

问题出在 JQuery Cycle Plugin 版本中：“lite”版本忽略了暂停/恢复命令。使用完整版可以解决问题。

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

【讨论】：