我在我的页面中使用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。
谢谢,如果我的问题不明确,请告诉我。
答案 0 :(得分: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 ------
});
我希望它会帮助别人。