0

请原谅我的无知，我最近才开始写javascript。我不是在寻找一个开箱即用的解决方案，而是更多一些有助于我自己编写代码的洞察力。

我正在开发一个全屏、滑动面板类型的网站，可以选择使用箭头键或可点击链接进行导航。

使用箭头键导航时，我的所有功能都运行良好，而我想做的是在使用屏幕导航链接时调用相同的功能。我不确定如何执行此操作，因为函数和变量是在键绑定函数中声明的。

我的第二个问题是我需要一种方法来防止在函数仍在动画时多次调用幻灯片函数。我尝试了各种 setTimeout 实现，以及 Ben Alman 的 doTimeout 和 debounce，但似乎无法使其正常工作。

任何帮助将不胜感激！

这是一个 jsFiddle，其中包含我构建的单工版本：http: //jsfiddle.net/BKpAK/3/

如果您不想摆弄，这里只是 JS：

$(document).ready(function () {         

var currentSlide = 1;

$(document).keydown(function(e){

    nextSlide = currentSlide + 1;
    prevSlide = currentSlide - 1;

    lastSlide = $(".slide").length

    cur1 = document.getElementById("slide" + currentSlide);
    prev1 = document.getElementById("slide" + prevSlide);
    next1 = document.getElementById("slide" + nextSlide);

    function moveRight(){
      if(currentSlide < lastSlide){
        $(next1).addClass('frontAndCenter').stop().animate({
          left: "0",
        }, 500, function() {
          $(this).removeClass("frontAndCenter");
          $(cur1).css("left", "-100%");
        });
        currentSlide = currentSlide + 1;
      }
      else{
          return false;
      };
    };

    function moveLeft(){
      if(currentSlide > 1){
          $(prev1).addClass('frontAndCenter').stop().animate({
            left: "0",
          }, 500, function() {
            $(this).removeClass("frontAndCenter");
            $(cur1).css("left", "100%");
          });
          currentSlide = currentSlide - 1
      }
      else{
          return false;
      };
    };

    switch(e.which) {
        case 37: // left
            moveLeft();
        break;

        case 39: // right
            moveRight();
        break;

        default: return;
    }
    e.preventDefault();
});

$("#arrowRight").click(function () {
    moveRight();        
});

$("#arrowLeft").click(function () {
    moveLeft();
});

});
4

2 回答 2

2

在键绑定之外声明你的函数，比如

var myFunction = function(e) {
  bla bla bla;
}

然后从你的 keydown 函数调用这个外部函数

(document).keydown(function(e){
    myFunction(e);
}

或从您想要的任何地方调用它。

于 2013-06-18T16:10:05.960 回答
1

至于你的第一个问题，你是对的。您希望使事件处理程序保持简单。您需要将逻辑移到事件处理程序之外：

$(document).ready(function () {
   //I would recommend putting the logic in here to avoid creating global variables/functions.

   var currentSlide = 1;

   function moveLeft() { /*...reworked logic...*/ }
   function moveRight() { /*...reworked logic...*/ }

    $(document).keydown(function(e){
        switch(e.which) {
            case 37: // left
                moveLeft();
            break;

            case 39: // right
                moveRight();
            break;

            default: return;
        }
        e.preventDefault(); //*You should only really prevent default if you use the key event
    });

    $("#arrowRight").click(function () {
        moveRight();

    });

    $("#arrowLeft").click(function () {
        moveLeft();
    });
});

我的第二个问题是我需要一种方法来防止在函数仍在动画时多次调用幻灯片函数。

至于你的第二个问题，我建议你阅读jquery queues。您可以创建自己的队列来控制来回移动幻灯片（提供除 fx 以外的任何内容的 queueName）。一旦当前队列中的内容完成，您添加队列的任何左/右步骤都将激活。如果您不想串起多个左/右操作，您可以取消该队列，而不会杀死所有其他可能正在运行的效果。

于 2013-06-18T16:29:53.243 回答