3

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

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

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

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

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

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

感谢您对此的任何想法-

最好的，埃里克

4

4 回答 4

3

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

于 2011-05-13T11:10:30.677 回答
0

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

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

于 2010-07-21T13:33:39.517 回答
0

我知道这是一个老问题，但我也遇到了同样的问题。我解决它的方法是简单地创建我自己的函数来暂停和恢复带有 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")
   }
});
于 2012-02-20T20:47:42.453 回答
0

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

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

于 2013-09-08T22:46:00.503 回答