0

一个多星期以来我一直有这个问题，这让我发疯了。我不是一个“代码”类的人，尽管我设法走到了这一步，但我真的达到了我的极限。我希望有人可以帮助我解决我的问题。

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

现在，Flexslider 插件有一个名为“键盘”的选项。这是一个布尔值。如果“真”，用户可以使用他的键盘上的箭头从一张幻灯片转到另一张幻灯片。我的问题是，即使不在视线范围内（当我在网站的不同部分时），滑块仍在注册键盘输入，这让我很困扰。我不希望用户在看不见时能够操纵滑块。所以我使用插件 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 只是因为它最难找到，其余的可以通过 google 轻松访问。我真的很抱歉。

就是这样...如果您有任何问题或需要我准确说明任何问题，我显然可以。不要担心你的英语：我理解它比我写的要好。最后; 如果您决定使用技术，请尝试向我解释，因为我不想只是复制/粘贴，但我想学习和提高自己。提前谢谢你，诚挚的，一些傻眼的家伙:)

4

2 回答 2

0

所以，我设法自己解决这个问题，有点。重要的是它会做我想做的事：当不在视野范围内时，用户不可能手动触发任何幻灯片。

我使用了 Flexslider 的修改版本，其中包括一个销毁方法（在这里找到它：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();  
            }
        },
    });
};

我的想法是销毁然后重新初始化函数，以便将我的变量考虑在内，但事实是，在视野外销毁它并在视野内初始化它完美地工作（尽管有一个非常短的“弹出”效果时它初始化 - 几乎不可见）。

希望这可以帮助 ！

于 2016-04-07T12:03:28.393 回答
0

如果您要查找的功能不是内置的，您将不得不修改插件。您的评估是正确的，该“键盘”属性仅在初始化时使用——这是 jQuery 插件的常见模式。

于 2016-04-04T12:12:38.393 回答