Question

你知道为什么我的功能仅适用于键盘上的一次点击吗？我想使用左右箭头移动我的滑块。右箭头只工作一次。我也希望在我的功能中添加左箭头... HTML

<div class="container slider">
    <ul>
        <li id="slider"><img src="img/slider/1.jpg" alt=""></li>
        <li id="slider2"><img src="img/slider/2.jpg" alt=""></li>
        <li id="slider3"><img src="img/slider/3.jpg" alt=""></li>
        <li id="slider4"><img src="img/slider/4.jpg" alt=""></li>
    </ul>

CSS

.slideshow {
  height: 700px;
  background: #676767;
}

.slider {
  width: 960px;
  height: 420px;
  overflow: hidden;
}
.slider ul {
  width: 200%;
  height: 420px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.slider li {
  float: left;
}

.slider img {
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
}

的jQuery

$(function () {

    var keyCodeL = 39;
    var keyCodeR = 37;

    $('body').keypress(function(){
        if(keyCodeL === 39){
            $('#slider').animate({'margin-left': -980},800)
        }else if (keyCodeR === 37){
            $('#slider2').animate({'margin-left': -1960 },800)
        }
    })
});

Answer 1

你在逻辑上是错误的。应按下按键检查条件。您正在根据自己的值检查值。例如：

 if(keyCodeL === 39){

始终为真，因为您在最前面声明了var keyCodeL = 39;

您需要检查，按下哪个键

$('body').keypress(function(e){
        if(e.keyCode === keyCodeL ){
            $('#slider').animate({'margin-left': -980},800)
        }else if (e.keyCode ===keyCodeR){
            $('#slider2').animate({'margin-left': -1960 },800)
        }
    })

Answer 2

您的if条件不正确。而不是检查按下的当前键，而是检查变量的值keycodeL, keycodeR

你应该重新考虑if条件，我还想提一下使用$(document)而不是$(body)

$(document).keypress(function(event) {
    if (event.charCode == keycodeL){
    //Code for left arrow
    }
    else if(event.charCode == keycodeR){
    //Code for right arrow 
    }
    });

keyCode和滑块的ejQuery函数

2 个答案: