Question

我在我的页面中使用jQuery的BxSlider插件，但它表现得非常奇怪，当我使用此代码使用BxSlider制作滑块时，滑块无法正常工作，即使我的自定义函数也是如此。意味着所有其他功能停止工作而不会在控制台中抛出错误。我卡住了！我尝试过很多东西但没有成功，我的这个BxSlider代码还有什么问题？

我的BxSlider代码是：

var perLink = jQuery('#qc-per');
var nextLink = jQuery('#qc-next');
var CustomPager = jQuery('#qc-custom-pager');
var BxSlider;
var ActualPager;
window.onload = function() {
    console.log('ready');
    BxSlider = jQuery('.bxslider').bxSlider({
        infiniteLoop: false,
        touchEnabled: true,
        pager: true,
        pagerType: 'short',
        pagerShortSeparator: ' de ',
        nextText: 'SIGUIENTE',
        prevText: 'ANTERIOR',
        hideControlOnEnd: true,
        slideWidth: 690,
        adaptiveHeight: true,
        autoControls: true, 
        onSlideAfter: function (slideElement, oldIndex, newIndex) {
            var total = BxSlider.getSlideCount();
            var current = newIndex + 1;
            if (total == current) {
                nextLink.css('visibility', 'hidden');
            } else {
                nextLink.css('visibility', 'visible');
            }
            if (current <= 1) {
                perLink.css('visibility', 'hidden');
            } else {
                perLink.css('visibility', 'visible');
            }
            CustomPager.text(ActualPager.text());
        }
    });

    ActualPager = jQuery('.bx-default-pager');
    CustomPager.text(ActualPager.text());
    perLink.css('visibility', 'hidden');

}
function doNext() {
    BxSlider.goToNextSlide();
}
function doPerv() {
    var slideNr = BxSlider.getCurrentSlide() - 1;
    BxSlider.goToSlide(slideNr);
}

我已经包含了＆＃34; jquery.bxslider.js＆＃34;另外，只有当我使用/插入上面的代码来制作滑块时，其他功能才会停止工作。我使用的是jquery-1.11.3.min.js和BxSlider v4.1.2。我也在网站上有Mootools。

谢谢，如果我的问题不明确，请告诉我。

Answer 1

在相同的代码和相同的页面上花了两天后，我发现BxSlider的第一张幻灯片每次都在重新编辑其中的所有页面，这导致js库在每次滑块加载时再次加载。

第一张幻灯片或BxSlider看起来像是

<img src="...." >WHOLE PAGE WAS LOADING AGAIN IN IT WAS CAUSING PROBLEM</img>

我仍然不知道它是否是BxSlider的错误或由于我的两个库，我由于某些原因同时使用Mootools和Jquery。

为了解决这个问题，我使用了

window.onload = function() {
  //CODE ------
}

而不是

jQuery(document).ready(function () {
  //CODE ------
});

我希望它会帮助别人。

使用BxSlider插件后，JQuery Don无法工作

1 个答案: