CSS HTML gallery 对键盘做出反应

css HTML gallery react to keyboard

本文关键字：键盘 HTML gallery CSS      更新时间：2023-09-26

我最近做了一个基本的html/css画廊，它很实用，带有下一个/上一个按钮的桌子。问题是我想让它响应键盘。就像如果有人点击键盘上的"左"按钮一样，它应该在上一张照片上，如果它点击"右"按钮，则进入下一页。如果你能用尽可能少的javascript/jquery来制作它，我会很高兴。我在谷歌上搜索了类似的东西，但我没有找到！如果您需要我网站的任何代码，请告诉我。请帮忙！

您可以使用

.on()和keydown事件捕获键盘交互，并决定在返回值后执行的操作，例如：

$(document).on("keydown", function (e) {
    e.preventDefault();
    var code = e.which || e.keyCode;
    console.log(code)
    if (code == 40) {
        // down arrow pressed : do something
        console.log("down arrow pressed")
    }
});

参见 JSFIDDLE

导航箭头的键盘映射为

// 37 = left arrow
// 38 = up arrow
// 39 = right arrow
// 40 = down arrow

编辑：为了避免过度使用if else if else，您可以使用switch（性能更好），例如：

$(document).on("keydown", function (e) {
    e.preventDefault();
    var code = e.which || e.keyCode;
    switch (code) {
        case 37:
            console.log("left arrow pressed")
            break;
        case 38:
            console.log("up arrow pressed")
            break;
        case 39:
            console.log("right arrow pressed")
            break;
        case 40:
            console.log("down arrow pressed")
            break;
        default:
            return false
    }
});

请参阅更新的 JSFIDDLE

肯尼迪的回答是正确的，但我稍微扩展了一下

$(document).on("keydown", function (e) {
    var code = e.which || e.keyCode;
    if (code == 40 || code == 39) { // down & right
        // replace selector with your button id/class
        $('.btn-next').click();
    } else if (code == 38 || code == 37) { // up & left
        // replace selector with your button id/class
        $('.btn-previous').click();
    }
});

该代码模拟单击下一个/上一个按钮，因此您可以放置单击或仅按一次键时应该发生的任何代码。

相关文章：