bx 滑块：单击默认 bx 寻呼机后如何继续自动滑动？答案

【问题标题】：bx slider: How to continue auto sliding after clicking in default bx pager?bx 滑块：单击默认 bx 寻呼机后如何继续自动滑动？
【发布时间】：2013-12-29 09:24:54
【问题描述】：

我想在单击 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 寻呼机导航被冻结。即使出现新幻灯片，活动点也会保持活动状态。如何解决？

【问题讨论】：

你为什么要再次调用 .bxSlider() 函数？
我试过 var slider =$('.bxslider').bxSlider({...});首先，但我认为调用slider.startAuto() 时出现错误。但我不确定了……

标签： jquery navigation bxslider

【解决方案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;
    });
});

第二个对我有用。

【讨论】：

谢谢！这是一个很大的帮助！但它不适用于您的 i 变量。必须是： var i = $(this).attr("data-slide-index"); ;)

【解决方案2】：

以下代码在网站上运行良好。请尝试一下：

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

【讨论】：

【解决方案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;
        });
    }
});

【讨论】：

【解决方案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();
        }

【讨论】：

谢谢！还没试过，但对我来说看起来合乎逻辑:)
不仅是该行，还有该行的其他 2 次出现。实际上，您可以搜索评论：// if auto show is running, stop it 找到它们。

【解决方案5】：

为了改进答案，当您在浏览器中点击或在手机上滑动时，这对我都适用，干净、简短且简单：

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

【讨论】：

【解决方案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();
}

【讨论】：

虽然我不喜欢修改库核心文件本身，但您的解决方案是唯一适合我的解决方案！
@Khaled Mahmoud 我在互联网上尝试了所有方法，但我在其他地方找到了这个，这需要在下一个版本中修复。

【解决方案7】：

而不是使用：

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

设置点击函数直接指向bx-prev和bx-next。这个更适合我。

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

【讨论】：

【解决方案8】：

这很好用..

<script type="text/javascript">
  jQuery(document).ready(function(){

        jQuery('.bxslider').bxSlider({
         video: true,
          useCSS: false,
          });

           $(".bx-controls-direction").click(function () {
            console.log('bla');            
            slider = $('.bxslider').bxSlider();
            slider.stopVideo();
            slider.startVideo();
            //slider.stopShow();
            //slider.startShow();
        });

});
</script>

【讨论】：

【解决方案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;
});

非常适合我。

【讨论】：

【解决方案10】：

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

r.stopAuto= function(t) {

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

【讨论】：