1

我在我的网站上使用 BJQS 滑块。

我也在同一个网站上使用fancybox。

我希望 BJQS 在fancybox 打开时暂停并在关闭时恢复。

有谁知道我如何为 BJQS 创建一个暂停/播放切换按钮？

谢谢

4

4 回答 4

1

Came across this whilst trying add a play/pause button to the plugin. @Irvin Dominin's suggestion relating to hoverpause is good but it will fail as soon as you hover the banners as the mouseover/mouseout is triggered.

I decided to extend the plugin with a new setting and turn off hoverpause.

First add the setting to the defaults object e.g.

// slider default settings
var defaults = {
    enableplaypause: false  // shows play/pause button
};

Next you'll want to set the click binding to your button, this is done in the init() function e.g.

// run through options and initialise settings
var init = function () {

    // configurations only avaliable if more than 1 slide
    if (state.slidecount > 1) {

        //enable play/pause button using setting we defined earlier
        if (settings.enableplaypause) {
            conf_enableplaypause();
        }
    }
};

Now for the conf_enableplaypause(); function which handles the state + button bindings:

var conf_enableplaypause = function () {
    $('#btn').click(function () {
        if (!state.paused) {
            clearInterval(state.interval);
            state.paused = true;
            $('#btn').text('PAUSED');
        } else {
            state.interval = setInterval(function () {
                go(vars.fwd, false);
            }, settings.animspeed);
            state.paused = false;
            $('#btn').text('PLAYING');
        }
    });
};

Pretty straightforward and is essentially a copy of what hoverpause does except on a button click along with updating the button text.

Hopefully this helps someone

于 2014-09-12T10:43:36.690 回答
1

fancybox 带有一些回调，因此您应该能够执行以下操作：

采用 Lee 和 Edwards 关于虚拟悬停的想法。

$(".fancybox").fancybox({
    padding : 0,
    openEffect : 'elastic',
    closeEffect: 'elastic',
    beforeLoad: function(){
        $(".banner").trigger("mouseover");
    },
    afterClose: function(){
        $(".banner").trigger("mouseout");
    }
});
于 2013-08-23T12:14:31.567 回答
1

我检查了插件，但找不到任何暂停/播放滑块的方法。

我看到一个名为：

hoverpause : true, // 在悬停时启用/禁用暂停幻灯片

因此，我们可以通过触发滑块本身的过度状态以这种方式“破解”它：

var stopbjqs = false;
$(function () {
    $('#dialog').bjqs({
        'showmarkers': false,
            'responsive': true,
            'automatic': true
    });

    $("#btn").click(function () {
        if (!stopbjqs) {
            $("#dialog").trigger("mouseover");
            stopbjqs=true;
        } else {
            $("#dialog").trigger("mouseout");
            stopbjqs=false;
        }
    });

});

但是有一些方法来操纵滑块肯定会更好。

演示：http: //jsfiddle.net/IrvinDominin/P8UgQ/

于 2013-08-22T15:28:25.277 回答
1

无需编辑源文件以提供暂停滑块的方法，或添加可以隐藏并触发单击的按钮，最快的方法是触发导致滑块暂停的鼠标事件。

查看演示，您可以看到当您mouseover滑动滑块时，滑块停止动画，直到您将鼠标移出它为止。因此，您可以模拟这些事件。

假设您的滑块 div#slider就像 BJQS 网站上的演示，您会这样做：

在fancybox打开

$('#slider').trigger('mouseover');

在fancybox关闭

$('#slider').trigger('mouseout');

去这里： http: //fancybox.net/api看看如何定义打开/关闭回调（见第一个表底部附近，“on”选项）

于 2013-08-22T15:25:06.403 回答