如何设置箭头键浏览 <img> 标签顺序？

Question

我在页面上设置了一个“照片库”，其中在底部显示了一堆缩略图，用户可以单击图像在主显示中查看。

顶部/大图设置如下：

<img src="" height="468px" name="frame1" id="picframe"/> 

它没有src开头，这很好，因为它很快就会被覆盖，因为我已经在标签中为每个缩略图设置了onclick参数：

<img onclick="document.images['frame1'].src='[//image source]'" src="[//image source]" height="70px" />

因此，基本上，如果用户单击缩略图，它将覆盖“ frame1”并在那里显示图像。

这很好用，但是只能通过单击用户来实现-我想对其进行设置，以便他们也可以使用箭头键-这样，他们就不必单击每个缩略图。

这就是我卡住的地方。 按下箭头键时，我需要包括什么以设置某种方式来更改显示？ 我找到了一些代码，可以检查是否按下了向左或向右箭头，但是我不知道如何将其绑定到更改frame1的src或如何知道哪个图像是“下一个”。

谢谢。

Answer 1

在body标签上添加onkeypress事件处理程序。

声明一个全局变量以记住当前显示的图像。

Answer 2

我建议使用jQuery。 在箭头中添加id='showPrev'和id='showNext'这样您就知道按下了哪个。

用id的frame-1, frame-2, so on标记img frame-1, frame-2, so on

然后，在按下箭头时，您可以定位某些img http://api.jquery.com/attribute-equals-selector/，例如$( "[img:id='frame-#']" )

可以按以下方式更改Src：参考：如果需要，可以使用jQuery在图像之间切换来更改图像源。

$("#my_image").attr("src","second.jpg");

您只需确定并找到一种方法，即可准确识别图像[img:id='frame-#'] （将＃更改为实际数字）