Question

昨天我一直在努力解决这个问题几个小时，并且无法想出一个在FlexSlider中随机化幻灯片速度的好方法。

我尝试的方法之一是尝试删除我应用它的元素（使用jQuery的remove()和append()函数），但事实证明这非常麻烦，只允许我使滑块在给定时间出现/消失（使用setInterval / setTimeout），不允许使用脚本的其余功能（例如滑动效果）。

最后，这就是我想出来的。我原本希望在每次图像显示时一次又一次地随机化slideshowSpeed，但我发现只有当我移除并重新添加元素并再次对其应用弹性域时才有可能。我最终接受了这样的事实，即这是不可能的，但是这个解决方案让我几乎完全符合我的想法：一次看多个幻灯片，以不同的速度过渡：

jQuery(document).ready(function($) {
  $('.slider_wrapper').each(function() {
    $(this).flexslider({
      animation: "fade",
      animationLoop: true,
      itemMargin: 0,
      minItems: 1,
      maxItems: 1,
      slideshow: true,
      controlNav: false,
      directionNav: false,
      smoothHeight: true,
      move: 1,
      randomize: true,
      slideshowSpeed: getRandomInt(1000, 5000)
    });
  });

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
});

.slider_wrapper {
  float:left;
  width:33%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/flexslider/2.4/jquery.flexslider-min.js"></script>
<link href="//cdn.jsdelivr.net/flexslider/2.4/flexslider.css" rel="stylesheet" />
<div class="slider_wrapper">
  <div class="flexslider" data-height="250">
    <ul class="slides">
      <li>
        <img src="http://placehold.it/250/000000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/ff0000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/0000ff/000000" alt="" />
      </li>
    </ul>
  </div>
</div>
<div class="slider_wrapper">
  <div class="flexslider" data-height="250">
    <ul class="slides">
      <li>
        <img src="http://placehold.it/250/000000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/ff0000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/0000ff/000000" alt="" />
      </li>
    </ul>
  </div>
</div>
<div class="slider_wrapper">
  <div class="flexslider" data-height="250">
    <ul class="slides">
      <li>
        <img src="http://placehold.it/250/000000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/ff0000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/0000ff/000000" alt="" />
      </li>
    </ul>
  </div>
</div>

编辑：问题是：是否有任何方法不仅可以在一个滑块内随机播放幻灯片速度，而且每次新图像显示时都会这样做（使用新的随机数更新幻灯片放映时间）？

Answer 1

我使用类似的东西。我的LI元素确实有一个data-attribute来传递它的持续时间值（从每张幻灯片的DB中获取）到flexslider的JS。

您可以查看Flexslider的“before：”选项，允许在加载幻灯片属性之前更改它：

<script type="text/javascript">
    $(window).load(function(){      
        $hook = $('.flexslider');
        $hook.flexslider({
            animation: $hook.data('animation'),
            controlNav: $hook.data('control-nav'),
            slideshow: $hook.data('slideshow'),
            startAt: $hook.data('start-at'),
            pauseOnHover: false,
            controlNav: false,
            video: true,
            before: function(slider){
                // clears the interval
                slider.stop();
                // grab a random duration to show this slide
                slider.vars.slideshowSpeed = getRandomInt(1000, 5000);
                // start the interval
                slider.play();
            }
        });
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }
    });             
    </script>

我没有运行代码，因此您可以根据需要调整/更正代码，但它应该按照您的要求进行操作。只需在代码中添加“before：”块，替换slideshowSpeed行，就可以了。

如何随机化幻灯片中的幻灯片速度？

1 个答案: