Bxslider设置不同边停顿长度挂在页面上

Question

我想解决 bxslider 的一个问题，即为每张幻灯片设置不同的暂停长度。我最初遵循了解决方案 here，它适用于 5 或 6 张幻灯片，但在杂耍超过 10-15 之后，微调器现在挂起：

Screenshot here.

这是我基于上述示例使用的滑块代码：

<script>
$(document).ready(function(e) {
    var ImagePauses = [15000,15000,15000,15000,15000,15000,15000,10000,10000,10000,10000,10000,10000,5000,5000,5000,5000,5000,5000,5000];

    var slider = $('.bxslider').bxSlider();
    modifyDelay(0);

    function modifyDelay(startSlide){
        slider.reloadSlider({
            mode: 'horizontal',
            //infiniteLoop: true,
            auto: true,
            autoStart: true,
            autoDirection: 'next',
            autoHover: true,
            pause: ImagePauses[startSlide],
            autoControls: false,
            pager: true,
            pagerType: 'full',
            controls: true,
            //captions: true,
            //speed: 500,
            startSlide: startSlide,
            onSlideAfter: function($el,oldIndex, newIndex){
                modifyDelay(newIndex);  
            } 
        });
    }
});
</script>

有什么我想念的东西吗？谢谢

Answer 1

更新

似乎有更多涉及制作 bxSlider 自定义自动功能。我意识到如果使用 auto 选项，则不需要 setTimeout()、goToNextSlide() 和 goToSlide() 方法。

我制作了 3 个对象文字，每个代表一个 bxSlider 选项。当下一组间隔结束时，switch() 将使用下一组 bxSlider 选项调用 reloadSlider() 方法。

旧

我们可以通过回调 onSlideAfter 来控制幻灯片间隔的延迟，调用 bxDelay() 的回调函数使用 setTimeout 和方法 goToNextSlide()。详细信息在来源中进行了评论。

片段

.as-console.as-console * {
  background: orange;
  color: black;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>bxArraySourcePauseInterval</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    img {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>

  <ul class="bx">
    <li>
      <img src="http://placehold.it/350x150/000/fff?text=1">
    </li>
    <li>
      <img src="http://placehold.it/350x150/00f/fc0?text=2">
    </li>
    <li>
      <img src="http://placehold.it/350x150/0e0/000?text=3">
    </li>
    <li>
      <img src="http://placehold.it/350x150/f00/fff?text=4">
    </li>
    <li>
      <img src="http://placehold.it/350x150/fff/000?text=5">
    </li>
  </ul>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
    $(function() {
      var count = 0;
      var cfg0 = {
        auto: true,
        pause: 3000,
        autoStart: true,
        autoHover: true,
        onSlideAfter: bxDelay
      }
      var cfg1 = {
        auto: true,
        pause: 2000,
        autoStart: true,
        autoHover: true,
        onSlideAfter: bxDelay
      }
      var cfg2 = {
        auto: true,
        pause: 1000,
        autoStart: true,
        autoHover: true,
        onSlideAfter: bxDelay
      }
      var bx = $('.bx').bxSlider(cfg0);

      function bxDelay($obj, from, to) {
        count++;
        switch (count) {
          case 8:
            bx.reloadSlider(cfg1);
            break;
          case 15:
            bx.reloadSlider(cfg2);
            break;
          case 22:
            bx.reloadSlider(cfg0);
            count = 0;
            break;
          default:
            break;
        }
        console.log('Count: ' + count);
      }

    });
  </script>

</body>


</html>

Bxslider设置不同边停顿长度挂在页面上

Bxslider set different side pause length hangs on page

javascript

jquery

bxslider

更新

旧

片段