Question

我遇到了BxSlider的问题。初始化后我尝试从BxSlider调用默认方法，但在控制台中我收到错误“TypeError：mainSlider.reloadSlider不是函数”。还有console.dir我没有从对象获取默认方法，只是jQuery方法。任何帮助？

$(document).ready(function(){
    var singleSlide = $('.bxslider li').length == 1;
    var sliderSpeed = $('.bxslider').data('speed')?$('.bxslider').data('speed'): 5000;
    //bx-slider function
    mainSlider = $('.bxslider').bxSlider({
        auto: !singleSlide,
        touchEnabled: true,
        pause: sliderSpeed,
        adaptiveHeight: true,
        onSliderLoad: function(){
            $('.bxslider').css("visibility", "visible");
            resizeHomeSlider();
        }        
    });

    mainSlider.reloadSlider();
}

Answer 1

的变化：

将var添加到mainSlider以使其保持在本地范围而非全局
auto是布尔
~~- pause是一个Interger~~ （看了第二眼，我觉得没问题。）
在bxSlider范围之外定义resizeHomeSlider，然后从bxSlider范围内回调。

这当然未经测试，因为并未提供每一个细节。

$(document).ready(function() {
  var singleSlide = $('.bxslider li').length;
  var sliderSpeed = $('.bxslider').data('speed') ? $('.bxslider').data('speed') : 5000;
  //bx-slider function
  var mainSlider = $('.bxslider').bxSlider({ // Include a var so mainSlider is not global 
    auto: true, //------auto is a Boolean (true/false, 0/1...)[it operates on it's own.]
    touchEnabled: true,
    pause: sliderSpeed,
    adaptiveHeight: true,
    onSliderLoad: resizeHomeSlider
  });
  // Define the function outside of bxSlder block
  resizeHomeSlider(idx) {
    // It doesn't matter if you use idx, but you should have it declared.
    $('.bxslider').css("visibility", "visible");
    // Do resizing magic...
  }

  mainSlider.reloadSlider();
});

<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>

<ul class="bxslider" data-speed='5000'>
  <li></li>

滑块初始化后的Undefiend函数bxslider

1 个答案: