javascript - jQuery Cycle 插件 - 向前/向后幻灯片放映

Question

我需要制作一个不循环的幻灯片，但实际上在幻灯片之间弹跳:例如，如果我有 3 张幻灯片，我希望幻灯片顺序为:

1 -> 2 -> 3 -> 2 -> 1 -> 2 ...

我想出了这个解决方案(使用 jQuery Cycle 版本 1):

  var $ss = $('#slideshow');

  var slideOpts = {
    pause: 1,                           // pause when hovering the slide
    timeout: 500,                       // time between each transition
    pager: '#slideshow-nav',            // nav container
    nowrap: 1,                          // don't wrap when the slideshow is over
  };

  function forwardsSlideshow() {
    console.log('called forwardsSlideshow');

    $ss.cycle('destroy');
    $ss.cycle($.extend({}, slideOpts, {
      end: function () {
        console.log('ended forward');
        backwardsSlideshow();
      }
    }));
  }
  function backwardsSlideshow() {
    console.log('called backwardsSlideshow');

    $ss.cycle('destroy');
    $ss.cycle($.extend({}, slideOpts, {
      end: function () {
        console.log('ended backwards');
        forwardsSlideshow();
      },
      backwards: true
    }));
  }
  forwardsSlideshow();

我知道这可以进行 super 重构，但为什么它不起作用？ 控制台日志打印的顺序为:

called forwardsSlideshow
ended forward
called backwardsSlideshow
ended backwards // BUT here it doesn't go backwards, it just starts over with forwardsSlideshow()
called forwardsSlideshow

这就像它在向前时调用我传递给 cycle 的 end 函数，但在向后时一旦开始就调用。

有什么想法吗？

Answer 1

看起来问题出在插件中，而不是在您的实现中。如果您使用此处的版本:http://malsup.github.io/jquery.cycle.all.js您将必须更新以下代码块。 (第 641 行)

改变这个

if (!manual && !p.cyclePause && !opts.bounce &&
    ((opts.autostop && (--opts.countdown <= 0)) ||
    (opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) {

对此:

if (!manual && !p.cyclePause && !opts.bounce &&
    ((opts.autostop && (--opts.countdown <= 0)) ||
    ((fwd && opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide) ||
    (!fwd && opts.nowrap && !opts.random && opts.currSlide < opts.nextSlide)))) {

它不起作用的原因是在 go() 函数中调用了它，该函数会转换到下一张幻灯片。它没有检查它是前进还是后退，因此，opts.nextSlide < opts.currSlide永远是true .