jQuery Cycle plugin - pause/resume weird behavior

问题

I have a slideshow running with the awesome cycle plugin, and when you click a button in the show, I show a hidden layer on the page and send a 'pause' command to cycle. I'm having two problems:

When the pause command is received, cycle immediately flips back to the 1st slide in the sequence (why??), and doesn't hit my before/after callbacks.
After closing the layer, I send a 'resume' command to cycle. The slideshow resumes (from the 1st slide, where the pause left it), but now cycle doesn't call my before/after callbacks at all, even as the slideshow progresses.

So I guess my question is: how can I properly pause/resume the slideshow so these strange behaviors don't occur? (And just to be completely clear and avoid any confusion, this isn't about the "pause on hover" feature, which is actually working fine for me. :-)

Here's my cycle() init, and my callback functions. (Why am I manually tracking the nextSlide, you ask? Because the built-in value for the current slide doesn't get updated properly for the before/after callbacks.)

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

Thanks for any thoughts on this--

best, Eric

回答1:

I had the same problem, pause and resume were not working. It appeared I had installed the lite version, with the full/complete version it's working.

回答2:

You didn't show your code for sending the pause command. Something is definitely wrong there because pause does NOT reset the slideshow to the first slide.

Also, you don't need to keep track of the slide index yourself. The third arg to the before/after callbacks is an options object that has the internal state of the slideshow. On that object you will find 'currSlide' and 'slideCount' properties, among many others.

回答3:

I know this is an old question, but I just had the same problem. The way I got around it was to simply create my own function to pause and resume the slideshow with JQuery's hover events.

As Eric pointed out in a few comments, a related issue is that the plugin's pause option only allows hovering over the IMG element to pause the slideshow, so if you've got anything over your images, like a pager or any decorative elements, then you are boned.

So, I put my decorative elements, banner (which I called "#banner") and pager all into a div called "#banner-container" and then applied this code to fix my problem:

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

The problem is in the JQuery Cycle Plugin version: the "lite" version ignores the pause/resume commands. Using the full version could solve the problem.

EDIT: Sorry, i was wrong: i tried both versions but had the same issue using the full version.

来源：https://stackoverflow.com/questions/3286736/jquery-cycle-plugin-pause-resume-weird-behavior

标签

jquery

jquery-plugins

jquery-cycle