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();

我知道这可以是超重构的，但为什么它不起作用？打印出来的控制台日志序列是：

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

就像它调用我传递给end的{{1}}函数一样，当它向前传递时，但是只要它向后传递就开始。

有什么想法吗？

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))) {

To This：

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。

jQuery Cycle插件 - 前进/后退幻灯片

1 个答案: