bxslider 设置不同的边暂停长度在页面上挂起答案

【问题标题】：Bxslider set different side pause length hangs on pagebxslider 设置不同的边暂停长度在页面上挂起
【发布时间】：2016-11-30 20:23:11
【问题描述】：

我希望解决 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>

我缺少什么明显的东西吗？谢谢。

【问题讨论】：

标签： javascript jquery bxslider

【解决方案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>

【讨论】：

非常感谢。这已经解决了加载问题，并且解释和 cmets 帮助我更好地理解了这个解决方案！
很高兴为您提供帮助，编码愉快。:)
再问一个问题。我的延迟似乎无法正常工作。所有幻灯片似乎都延迟了相同的数量，而且它们比设定的时间要短得多。我似乎无法弄清楚为什么。有什么想法吗？
@NPI 我的错，看更新，它设置为 3、2、1 秒，因为我不耐烦，但很容易调整。