Question

我有这个问题，因为一个多星期以来它让我发疯了。我不是＆＃34;代码＆＃34;有点儿，尽管我设法走得这么远，但我真的达到了我的极限。我希望有人可以帮我解决问题。

所以，这是我的问题：我正在使用三个插件：Flexslider，Inviewevent（https://remysharp.com/2009/01/26/element-in-view-event-plugin）和Scrollify。我的网站分为几个部分，每个部分都是全屏，并且由于使用了scrollify插件及其航点系统，每次用户滚动或使用键盘时，网站都会自动滚动到带有幻灯片动画的下一个航点。由于每个部分都是全屏，我停用了滚动条。我正在使用Flexslider，因为我试图允许用户垂直和水平滚动。为了给你一个想法，我对这个网站非常有启发，并且基本上试图达到同样的目的：http://www.kunstler.it/。

现在，Flexslider插件有一个名为＆＃34; keyboard＆＃34;的选项。它是一个布尔值。如果＆＃34; true＆＃34;，用户可以使用键盘上的箭头从幻灯片转到幻灯片。我的问题是，即使在视线之外（当我在我的网站的不同部分时），滑块仍在注册键盘输入，这让我感到困扰。我不希望用户在滑块不在视野时操纵滑块。所以我使用插件Inviewevent来创建一个条件：如果滑块在视图中，那么键盘工作，如果没有，那么它不起作用。我也会对移动设备上的触摸滑动功能做同样的事情，但由于该插件还提供了一个选项，我现在专注于键盘，因为它应该基本相同。

这是我的Jquery：

$(window).load(function(){
    var loopCount = 0; 
    var $keyboard;

    $('.flexslider').bind('inview', function (event, visible) { // Plugin "Inviewevent". Allows me to detect if an element is inview or not
        if (visible == true) {
            $keyboard = true;
            console.log($keyboard); // Is true
        }
        else {
            $keyboard = false;
            console.log($keyboard); // Is false
        }
    });
    $('.flexslider').flexslider({ // Plugin Flexslider. Contains the options and Callback that I use
        slideshow: false,
        animation: "slide",
        controlNav: false,
        directionNav: false,
        animationLoop: false,        
        keyboard: $keyboard, // This is the option that I'm interested in. I tried to use the variable $keyboard to define it, but (to my very little knowledge) it would seem that it only works once when the function is initialised. It doesn't change dynamically which is what I'm trying to do.
        end : function(slider){  // This callback fires when the user reaches the last slide
            currentLoopCount = loopCount;
            loopCount = currentLoopCount + 1;
        },
        after : function(slider){
            if (loopCount > 0 && slider.currentSlide === 0){ 
                $.scrollify.next(); // Plugin Scrollify. When the user go back to the first slide, the wbesite automatically scroll to the next section. I suck at code and I find it very neat :D
            }
        },
    });
$('.button').click(function(){
        alert($keyboard);
}); // This is not really important. I just used it to confirm the fact that the $keyboard variable do what I want it to do. When my slider is in view, it is true, and when it's not, it's false. No problem here.

}）;

这就是它。对于我所关心的一切来说，这可能是一种完全不同的方法，无论如何，它已经成为我迄今为止的奇迹。我非常确定我所做的一些事情不符合人体工程学或推荐，所以如果您愿意，请不要犹豫，纠正它。我还要为我缺乏清晰度，我的词汇/拼写错误以及最终的奇怪句子道歉：英语不是我的母语。还要记住，我不擅长编码。 HTML和CSS是小菜一碟，但即使我不知道它的理论，javascript也不是我的朋友。最后一件事，我想添加我使用的所有插件的链接，但我不能发布超过2个链接，因为我还没有足够的声誉。我保留Inviewevent只是因为它是最难找到的，其余的可以通过谷歌轻松访问。我真的很抱歉。

这就是关于它的......如果你有任何问题，或者你需要我做任何准确的话，我很明显可以使用。不要担心你的英语：我理解它比写它更好。最后;如果你决定去技术，请尝试向我解释，因为我不想复制/粘贴，但我想学习和提高自己。先感谢您，亲切，有些傻眼的家伙：）

Answer 1

如果您要查找的功能不是内置的，则您必须修改该插件。你在评估中纠正了这个＆＃34;键盘＆＃34;属性仅在初始化时使用 - 这是jQuery插件的常见模式。

Answer 2

所以，我设法解决这个问题，有点儿。重要的是它做了我想做的事情：当看不到时，用户不可能手动触发任何幻灯片。

我使用了Flexslider的修改版本，其中包含一个destroy方法（在此处找到：https://github.com/bradgreens/FlexSlider/tree/release-2-2-0）

我使用了inviewevent插件并将其与destroy方法结合使用以实现我想要的目标：

$('#portfolio').bind('inview', function (event, visible) {
    if (visible == true){
        initflex();
    }
    else if (visible == false){
        $('.flexslider').flexslider("destroy");
    }
});

function initflex() {
    $('.flexslider').flexslider({ //changed selector from .flexslider
        slideshow: false,
        animation: "slide",
        controlNav: false,
        directionNav: false,
        animationLoop: false,        
        keyboard: true,
        pauseInvisible: true,
        multipleKeyboard: false,
        controlNav: false,
        end : function(slider){
            currentLoopCount = loopCount;
            loopCount = currentLoopCount + 1;
        },
        after : function(slider){
            if (loopCount > 0 && slider.currentSlide === 0){ // meh
                $.scrollify.next();  
            }
        },
    });
};

我的想法是销毁然后重新初始化函数，以便将我的变量考虑在内，但事实是在视野之外将其销毁并在视野中初始化时工作完美（尽管有一个很短的“流行音乐” “初始化时的效果 - 几乎不可见。”

希望这有帮助！

我的变量值发生了变化，如何相应地更新我的函数？

2 个答案: