网站搜索

jquery - Javascript 按钮监听器只触发一次?


我正在为我正在制作的网站制作一个幻灯片类型的轮播器。轮播器本身工作正常,但我正试图让幻灯片可以通过键盘的左右键前进/后退。我的代码是这样的:

$(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/

答案#1

好,我解决了这个问题。

这与您绑定事件的事实无关;事件触发是正确的,但您用来计算位置的公式是错误的。

你在块内定义了 currentPosition 变量;所以每次触发事件时它都会被定义;因此一旦触发,你总是会得到相同的值。

我为了解决这个问题所做的是将currentPosition移到全局空间。

在这里查看实时效果: http://jsfiddle.net/kuroir/SSd3r/

请注意,当你处理这类问题时使用调试器非常重要,我强烈建议你使用谷歌浏览器。

答案#2

每次触发 keydown 事件时,你都在重新定义 'currentPosition',无论你在幻灯片中的当前位置如何。虽然这不是代码中唯一的问题,但它会导致大部分奇怪的行为。先修复这个问题,然后再继续。Shawn 说得对,使用调试器并设置断点。