但是你必须特别小心选择事件捕捉光标键，因为Webkit has decided not to trap them with the keypress event as it is not in the standard.此时，其他3个答案在这里使用这个按键事件，这就是为什么他们不工作在谷歌Chrome或Safari，但如果你改变到键下，他们将在所有浏览器上工作。

您可以使用此jQuery代码捕获左，右，上和下箭头键的按键事件：

$(window).keydown(function(e) {
  switch (e.keyCode) {
    case 37: // left arrow key
    case 38: // up arrow key
      e.preventDefault(); // avoid browser scrolling due to pressed key
      // TODO: go to prevIoUs image
      return;
    case 39: // right arrow key
    case 40: // up arrow key
      e.preventDefault();
      // TODO: go to next image
      return;
  }
});

在下面的代码片段中，您可以看到并运行一个完整的示例，其中使用键或按钮交换图像。

var currentImage = 0;
var imagesArray = [
  'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png','https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/150px-Wikipedia-logo-v2.svg.png','https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/150px-Git-logo.svg.png'
];

function hasPrev() {
  return currentImage > 0;
}

function hasNext() {
  return currentImage < imagesArray.length - 1;
}

function goToPrev(e) {
  e.preventDefault();
  if (!hasPrev())
    return;
  currentImage -= 1;
  updateScreen();
}

function goToNext(e) {
  e.preventDefault();
  if (!hasNext())
    return;
  currentImage += 1;
  updateScreen();
}

function updateScreen() {
  $('#imgMain').attr('src',imagesArray[currentImage]);
  $('#btnPrev').prop('disabled',!hasPrev());
  $('#btnNext').prop('disabled',!hasNext());
}

$(document).ready(function() {
  updateScreen();
  $('#btnPrev').click(goToPrev);
  $('#btnNext').click(goToNext);
});

var keyCodes = {
  left: 37,up: 38,right: 39,down: 40
};

$(window).keydown(function(e) {
  switch (e.keyCode) {
    case keyCodes.left:
    case keyCodes.up:
      goToPrev(e);
      return;
    case keyCodes.right:
    case keyCodes.down:
      goToNext(e);
      return;
  }
});

button:enabled kbd {
  color: green;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnPrev">
  PrevIoUs Image
  <br/>
  <small>(arrow keys: <kbd>left</kbd> or <kbd>up</kbd>)</small>
</button>
<button id="btnNext">
  Next Image
  <br/>
  <small>(arrow keys: <kbd>right</kbd> or <kbd>down</kbd>)</small>
</button>
<br/>
<img id="imgMain" src="">

更新(2016年5月)

keyCode最近已被弃用(但我还没有找到一个跨浏览器解决方案)。引用MDN article for keyCode：

Deprecated

This feature has been removed from the Web standards. Though some browsers may still support it,it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

… …这不应该被新的Web应用程序使用。 IE和Firefox已经(部分)支持KeyboardEvent.key。此外，Google Chrome和Safari支持KeyboardEvent.keyIdentifier，它在DOM 3级事件的旧草稿中定义。如果你可以使用它们或其中之一，你应该尽可能使用它们。