Question

我有一个页面通过ajax调用获取所有内容。我也通过ajax调用获取滑块的图像。我用getElem设置滑块DIV的全部内容... ByID（'slider'）。innerHTML =“DIV ID ='bxslider'＆gt; ...等。然后：

 var bxSlider = $('.bx-pager2').bxSlider({
            mode: 'horizontal',     //'vertical',
            ticker: true,
            tickerHover: true,
            tickerspeed: 50000,
            infiniteLoop: true,
            speed: 20000,
            autoHover: false,
            minSlides: 4,
            maxSlides: 4,
            slideWidth: 150,
            slideMargin: 10,
            responsive: true,
            useCSS: false,
            startSlide: 0

        });

问题是：在将新图像加载到滑块DIV中之后，速度不同，例如加载滑块中的50个图像会使速度上升，无法识别图像上的任何内容。

我试图在这里实现一个bxslider.reload（），但这会使滑块加载器的时间不详（很长）。

有什么想法吗？

Answer 1

我自己遇到了这个问题，虽然这不是一个真正的解决方案，但它肯定是一个解释。如果你去git并点击js的第907行，你会发现速度是按比例计算的，该比率取决于滑块的总水平尺寸。

对我来说，这是一个非常大的问题，因为我在一个页面上运行多个滑块，每个滑块都动态地输入不同数量的图像。我已经操纵了自动收报机的默认行为，因此它只会继续悬停，现在它们都以不同的速度运行，其中一些速度非常快。任何人都有这方面的新信息吗？

Answer 2

我通过计算滑块中有多少张图片来解决这个问题。我为每张图片选择了5000的速度。

我认为关于速度的令人困惑的一点是按照图像计算的。

HTML：

<ul class="bxslider-ticker">
  <li><img src="http://placehold.it/200x150" alt=""></li>
  <li><img src="http://placehold.it/200x150" alt=""></li>
  <li><img src="http://placehold.it/200x150" alt=""></li>
  <li><img src="http://placehold.it/200x150" alt=""></li>
  <li><img src="http://placehold.it/200x150" alt=""></li>
  <li><img src="http://placehold.it/200x150" alt=""></li>
  <li><img src="http://placehold.it/200x150" alt=""></li>
  <li><img src="http://placehold.it/200x150" alt=""></li>
  <li><img src="http://placehold.it/200x150" alt=""></li>
  <li><img src="http://placehold.it/200x150" alt=""></li>
</ul>

JS：

$(function() {
  //Count the number of li elements
  var n = $( ".bxslider-ticker li" ).length;

  var ticker = $('.bxslider-ticker').bxSlider({
    minSlides: 1,
    maxSlides: 100,
    slideWidth: 200,
    slideMargin: 10,
    ticker: true,
    mode: 'horizontal',
    tickerHover: true,
    //Multiply the number of li elements with 5000
    speed: 5000*n
  });
});

添加图像时，bxslider-4会加速

2 个答案: