Question

我正在为我正在制作的网站制作幻灯片式旋转器。旋转器本身工作正常，但我试图用键盘上的左/右键使幻灯片向前/向后滑动。我的代码是这样的：

$(document).keydown(function(e){
    var currentPosition = 0;
    var slideWidth = 836;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var animLength = 600;
    if (e.keyCode == 37) { 
          currentPosition = currentPosition-1;
            // Check to see if new position is unbounded, and wrap accordingly.
            checkForEnds(currentPosition);
            // Move slideInner using margin-left
            $('#slideInner').animate({
              'marginLeft' : slideWidth*(-currentPosition)
            }, animLength, 'easeOutExpo');
            animLength=600;
       return false;
    }
    /*Same code for right button, removed to save space.*/
    function checkForEnds(position){
    // If left is clicked on first slide, wrap to end.
    if(position==-1){currentPosition = numberOfSlides-1, animLength=1000}
    // If right is clicked on last slide, wrap to beginning.
    if(position==numberOfSlides){currentPosition = 0, animLength=1000}
  }
});

我的代码工作正常但只有一次。我可以向左或向右旋转一次，但在我这样做后，我不能重复使用相同的键，直到按下另一个键。我对Javascript输入很新，是否有一个简单的解决方法？

这是临时网站。现在这是一团糟，但我可以很好地处理所有奇怪的订购事项和布局问题。 http://technoheads.org/test/ice/

Answer 1

好的，我解决了这个问题。

这与你绑定一个事件无关;事件被正确触发，但用于计算位置的等式是不正确的。

你在块中定义了currentPosition var;因此，每次使用触发事件时都会定义;所以一旦触发你就会得到相同的价值。

我要解决的问题是将currentPosition移到全局空间。

在此处查看：http://jsfiddle.net/kuroir/SSd3r/

另请注意，在处理此类问题时使用调试器非常重要，我强烈建议您使用Google Chrome进行此操作。

Answer 2

每次启动keydown事件时，无论您当前在幻灯片中的位置如何，都会重新定义'currentPosition'。虽然这不是代码的唯一问题，但它会导致大量奇怪的行为。首先修复该问题并从那里开始工作。 Shawn是对的，使用调试器并设置断点。

Answer 3

您知道如何使用调试器吗？在chrome按ctrl + shift + j并选择脚本选项卡。导航到您的代码并设置一堆断点。刷新页面......然后您可以实时查看正在发生的事情。

Javascript按钮监听器触发一次？

3 个答案: