Question

我在推荐部分的sequence js slider添加了page，但我无法弄清楚为什么它会随机停止循环/自动播放。没有控制台错误或警告。

手动按钮仍然可以工作，它也会随机循环。但我不明白为什么它一开始就停止了。

HTML：

<div id="sequence">
  <ul class="seq-canvas">
    <li class="seq-in step1">
      <div class="author">
        <h3>John Doe</h3>
        <h4>Director, Company</h4>
      </div>
      <div class="review">
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
      </div>
    </li>

    <li class="step2">
      <div class="author">
        <h3>Jane Smith</h3>
        <h4>Lawyer, Other Company</h4>
      </div>
      <div class="review">
        <p>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
      </div>
    </li>

    <li class="step3">
      <div class="author">
        <h3>Alex Sparks</h3>
        <h4>Lawyer, Company</h4>
      </div>
      <div class="review">
        <p>"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
      </div>
    </li>
  </ul>
  <h1 class="section-title">What Our Clients Say</h1>
  <a class="seq-prev"><i class="fa fa-chevron-left"></i></a>
  <a class="seq-next"><i class="fa fa-chevron-right"></i></a>
</div>

JS：

// Get the Sequence element
  var sequenceElement = document.getElementById("sequence");
  var options = {
    startingStepAnimatesIn: true,
    autoPlay: true,
    autoPlayInterval: 4000,
    keyNavigation: true,
    fadeStepWhenSkipped: true
  }
  var mySequence = sequence(sequenceElement, options);

Answer 1

正是序列的Autoplay功能暂停了悬停时的自动播放，我可以用这样的小代码确认

mySequence.stopped = function() {
  console.log("Auto play stopped");
}

要禁用此行为，我只使用了另一个准备使用选项autoPlayPauseOnHover，这解决了问题。

var options = {
    startingStepAnimatesIn: true,
    autoPlay: true,
    autoPlayPauseOnHover: false,
    autoPlayInterval: 4000,
    keyNavigation: true,
    fadeStepWhenSkipped: true
  }

切换标签时仍然会停止，但我认为考虑到性能影响，这是合理的。当你回到它时我会自动启动。

序列Js自动播放随机停止

1 个答案: