0%

bxSlider插件点击分页后继续滚动

bxSlider插件点击分页后会自动停止滚动,且没有API来控制它,所以需要自己写代码来让轮播继续滚动,代码:

 

$(document).ready(function(){
var slider = $('.slider').bxSlider({
mode: 'horizontal',
captions: true,
auto: true,
speed: 500,
controls: false,
pause: 3000,
autoHover:true,
onSliderLoad:function(){
$(".bx-pager-item a").click(function() {
var thumbIndex = $('.bx-pager-item a').index(this);
slider.goToSlide(thumbIndex);
slider.startAuto();
$('.bx-pager-item a').removeClass('active');
$(this).addClass('active');
return false;
});
}
});
})

如果需要左右键控制的话代码如下:


$(document).ready(function(){
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
captions: true,
auto: true,
speed: 500,
controls: true,
pause: 3000,
autoHover:true,
onSliderLoad:function(){
$(".bx-pager-item a").click(function() {
var thumbIndex = $('.bx-pager-item a').index(this);
slider.goToSlide(thumbIndex);
slider.startAuto();
$('.bx-pager-item a').removeClass('active');
$(this).addClass('active');
return false;
});
$(".bx-wrapper a.bx-next,.bx-wrapper a.bx-prev").click(function() {
var thumbIndex = $('.bx-pager-item a.active').parent().index();
slider.goToSlide(thumbIndex);
slider.startAuto();
$('.bx-pager-item a').removeClass('active');
$('.bx-pager-item').eq(thumbIndex).find('a').addClass('active');
return false;
});
}
});
})