Javascript 按键水平导航

我试图使用左/右箭头在我的网页上水平导航

由于Firefox/Chrome处理默认箭头移动的方式不同，我不得不禁用默认移动（Firefox会将其向右移动20像素）

window.addEventListener（“向下键”，函数（e）{
//空格键和箭头键
if（[32,37,38,39,40].indexOf（e.keyCode）>-1）{
e、 预防默认值（）；
}
}，假）；

然后我有一个按键功能，可以在按键时向左/向右移动1980px。（由于阻止默认移动，我无法使按键功能正常工作）

$（窗口）.keydown（函数（e）{
var-currentx=0；
var=1920；
var btnright=（+currentx）+（+viewport）；
var btnleft=（+currentx）-（-viewport）；
如果（e.which==37）{
scrollTo（btnleft，0）；
currentx=（+currentx）-（-viewport）；
}否则如果（e.which==39）{
滚动到（btnright，0）；
currentx=（+currentx）+（+viewport）；
}
});

我希望它是重复的（页面是6000px宽），但我想一次移动一个面板（1980px）（每次移动后更新$Current）。最终，我可以通过箭头导航整个页面

我的问题是我不能让事件触发多次，我只能从0导航到1980。不会再进一步了。有解决办法吗

---

感谢@CBroe所说的，您的

currentx

变量在每次触发事件时都被设置为

0

。尝试将

currentx

变量声明移出事件处理程序，如下所示：

<script>
    var currentx = 0,
        viewport = 1920;
    $(window).keydown(function (e) {
        var btnright = (+currentx) + (+viewport),
            btnleft = (+currentx) - (-viewport);
        if ( e.which == 37 ) {
            window.scrollTo(btnleft, 0);
            currentx = (+currentx) - (-viewport);
        } else if ( e.which == 39 ) {
            window.scrollTo(btnright, 0);
            currentx = (+currentx) + (+viewport);
        }
    });
</script>

var currentx=0，
视口=1920；
$（窗口）.keydown（函数（e）{
var btnright=（+currentx）+（+viewport），
btnleft=（+currentx）-（-viewport）；
如果（e.which==37）{
scrollTo（btnleft，0）；
currentx=（+currentx）-（-viewport）；
}否则如果（e.which==39）{
滚动到（btnright，0）；
currentx=（+currentx）+（+viewport）；
}
});

我认为这不是只触发一次事件的问题（在开始处放置一个console.log debug输出以进行验证），而是每次调用处理程序时您都将

currentx

设置为

0

。

<script>
    $(window).keydown(function (e) {
    var currentx = 0;
    var viewport = 1920;
    var btnright = (+currentx) + (+viewport);
    var btnleft = (+currentx) - (-viewport);

if ( e.which == 37 ) {
    window.scrollTo(btnleft, 0);
    currentx = (+currentx) - (-viewport);
} else if ( e.which == 39 ) {
    window.scrollTo(btnright, 0);
    currentx = (+currentx) + (+viewport);
}
});
</script>

<script>
    var currentx = 0,
        viewport = 1920;
    $(window).keydown(function (e) {
        var btnright = (+currentx) + (+viewport),
            btnleft = (+currentx) - (-viewport);
        if ( e.which == 37 ) {
            window.scrollTo(btnleft, 0);
            currentx = (+currentx) - (-viewport);
        } else if ( e.which == 39 ) {
            window.scrollTo(btnright, 0);
            currentx = (+currentx) + (+viewport);
        }
    });
</script>