Question

我希望解决bxslider关于为每张幻灯片设置不同暂停长度的问题。我最初遵循解决方案here并且它适用于5或6张幻灯片，但是在侧面显示超过10-15之后，微调器现在就挂起了：

以下是基于以上示例我使用的滑块代码：

<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自定义自动功能。我意识到如果使用setTimeout()选项，则不需要goToNextSlide()，goToSlide()和auto方法。

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

<小时/>

OLD

我们可以使用回调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设置不同的侧面暂停长度挂在页面上

1 个答案:

更新

OLD

段