如何对此代码进行按键操作？

Question

我是 JavaScript 和 jQuery 的新手，所以这是我的问题。我如何向此代码添加一个简单的按键操作。 就像我按右箭头一样，转到下一个图像。如果我按左箭头，转到上一张图片。 我已经查过它并自己尝试了一些东西，但我无法将任何东西集成到这个特定的代码中。

现在，我可以简单地使用另一个代码并使用灯箱画廊或其他东西，但我不希望这样，因为我已经在网站上找到了某个地方，而且我无法重来。

function showImage(smSrc, lgSrc) {
  document.getElementById('largeImg').src = smSrc;
  showLargeImagePanel();
  unselectAll();
  setTimeout(function() {
    document.getElementById('largeImg').src = lgSrc;
  }, 1)
}

function showLargeImagePanel() {
  document.getElementById('largeImgPanel').style.display = 'block';


}

function unselectAll() {

  if (document.selection)
    document.selection.empty();
  if (window.getSelection)
    window.getSelection().removeAllRanges();
}

#largeImgPanel {
  text-align: center;
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 100, 0.8);
}

<img src="./images/t_p0001.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0001.JPG');" />
<img src="./images/t_p0002.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0002.JPG');" />
<img src="./images/t_p0003.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0003.JPG');" />
<img src="./images/t_p0004.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0004.JPG');" />
<div id="largeImgPanel" onclick="this.style.display='none'">
  <img id="largeImg" style="height:100%; margin:0; padding:0;" />
</div>

Answer 1

要使用 JQuery 检测按键，您可以将函数绑定到 keydownevent ：

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

（取自there）

要更改显示的 img，您可以执行以下操作：

$("#largeImgPanel").html('<img src="./images/t_p0001.jpg"  style="cursor:pointer"');

然后您必须实施一个系统来了解正在显示的图像，并使用此信息来确定要显示的下一个图像。

编辑：根据要求，使其通过图像：

var imgs = ["./images/t_p0001.jpg", "./images/...", etc];

var currentImg = 0;

然后在 keydown 事件处理程序中，您将拥有：

case 37: // left
if (currentImg === 0) {
    currentImg = imgs.length - 1;
}
else {
    currentImg--;
}
break;
case 39: // right
if (currentImg === imgs.length - 1) {
    currentImg = 0;
}
else {
    currentImg++;
}
break;

那么你只需要更新你的img 标签的src 属性（在切换之后）：

if (e.which === 37 || e.which === 39) {
    $("#largeImgPanel>img").attr("src", imgs[currentImg]);
}