bx slider：如何在单击默认bx寻呼机后继续自动滑动？

我想在点击bx寻呼机项目后继续自动滑动。

这是代码：

$(document).ready(function () { $('.bxslider').bxSlider({ mode: 'horizontal', //mode: 'fade', speed: 500, auto: true, infiniteLoop: true, hideControlOnEnd: true, useCSS: false }); $(".bx-pager-link").click(function () { console.log('bla'); slider = $('.bxslider').bxSlider(); slider.stopAuto(); slider.startAuto(); //slider.stopShow(); //slider.startShow(); }); }); 

未注释的stopShow()和startShow( ）函数根本不起作用。 startAuto()继续幻灯片放映，但bx寻呼机导航被冻结。 即使出现新幻灯片，活动点仍保持活动状态。 怎么解决？

Answer 1

你可以这样试试：

 $(document).ready(function () { var slider = $('.bxslider').bxSlider({ mode: 'horizontal', //mode: 'fade', speed: 500, auto: true, infiniteLoop: true, hideControlOnEnd: true, useCSS: false }); $(".bx-pager-link").click(function () { console.log('bla'); slider.stopAuto(); slider.startAuto(); }); }); 

或者您可以使用此：

 $(document).ready(function () { var slider = $('.bxslider').bxSlider({ mode: 'horizontal', //mode: 'fade', speed: 500, auto: true, infiniteLoop: true, hideControlOnEnd: true, useCSS: false }); $('.bx-pager-item a').click(function(e){ var i = $(this).index(); slider.goToSlide(i); slider.stopAuto(); restart=setTimeout(function(){ slider.startAuto(); },500); return false; }); }); 

第二个对我有用。

Answer 2

以下代码在网站上正常运行。 请试一试：

 var slider = $('.bxslider').bxSlider({ auto: true, pager: false, autoHover: true, autoControls: true, onSlideAfter: function() { slider.stopAuto(); slider.startAuto(); } }); 

Answer 3

这对我有用：

 var slider = $('.bxslider').bxSlider({ auto: true, controls: false, onSliderLoad: function () { $('.bx-pager-link').click(function () { var i = $(this).data('slide-index'); slider.goToSlide(i); slider.stopAuto(); slider.startAuto(); return false; }); } }); 

Answer 4

 var clickNextBind = function(e){ // if auto show is running, stop it if (slider.settings.auto) el.stopAuto(); **<--- You must Delete this row.** el.goToNextSlide(); e.preventDefault(); } 

Answer 5

为了改善答案，当你在浏览器中点击时，或者当你在手机上刷卡时，这对我来说既适用于移动设备，又干净，简洁：

 var slider = $('.slider'); slider.bxSlider({ auto: true, autoControls: true, onSlideAfter: function() { slider.startAuto() } }); 

Answer 6

我尝试了上面的所有解决方案，但没有运气，我使用的是最新版本4.1.2

在Jquery.bxslider.js中添加“el.startAuto（）;”

 /** * Click next binding * * @param e (event) * - DOM event object */ var clickNextBind = function(e){ // if auto show is running, stop it if (slider.settings.auto) el.stopAuto(); el.goToNextSlide(); e.preventDefault(); el.startAuto(); } /** * Click prev binding * * @param e (event) * - DOM event object */ var clickPrevBind = function(e){ // if auto show is running, stop it if (slider.settings.auto) el.stopAuto(); el.goToPrevSlide(); e.preventDefault(); el.startAuto(); } 

Answer 7

而不是使用：

 $('.bx-pager-item a').click(function(e){ //blah }); 

将click函数设置为直接指向bx-prev和bx-next。 这个对我来说效果更好。

 $('.bx-prev, .bx-next').click(function(e){ //blah }); 

Answer 8

这工作得很好..

Answer 9

这段代码：

 var slider = $('.bxslider').bxSlider(); $('.bx-pager-link').click(function () { var i = $(this).attr('data-slide-index'); slider.goToSlide(i); slider.stopAuto(); slider.startAuto(); return false; }); 

对我来说很完美。

Answer 10

在jquery.bxslider.min.js ，搜索并隐藏

 r.stopAuto= function(t) { //o.interval && (clearInterval(o.interval), o.interval = null, o.settings.autoControls && // 1 != t //&& A("start")) },