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 回答