Question

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

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

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

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

由于

Answer 1

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

观看演示，您可以看到当您mouseover滑块时，滑块会停止动画，直到您将鼠标移到其外部。因此，您可以模拟这些事件。

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

打开fancybox

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

关闭fancybox

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

转到此处：http://fancybox.net/api了解如何定义开启/关闭回调（请参阅第一个表底部附近，“开启”选项）

Answer 2

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

我看到一个叫做的选项：

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/

Answer 3

fancybox附带一些回调，所以你应该可以做类似的事情：

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

$(".fancybox").fancybox({
    padding : 0,
    openEffect : 'elastic',
    closeEffect: 'elastic',
    beforeLoad: function(){
        $(".banner").trigger("mouseover");
    },
    afterClose: function(){
        $(".banner").trigger("mouseout");
    }
});

Answer 4

尝试在插件中添加播放/暂停按钮时遇到此问题。 @Irvin Dominin关于hoverpause的建议是好的，但是当你在鼠标悬停/鼠标移出时触发横幅时它会立即失败。

我决定使用新设置扩展插件并关闭hoverpause。

首先将设置添加到defaults对象，例如

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

接下来，您需要将点击装订设置为您的按钮，这可以在init()功能中完成，例如

// 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();
        }
    }
};

现在处理状态+按钮绑定的conf_enableplaypause();函数：

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');
        }
    });
};

非常简单，基本上是hoverpause所做内容的副本，除非点击按钮并更新按钮文本。

希望这有助于某人

BJQS Slider暂停点击

4 个答案: