如何设置箭头键以按顺序浏览 <img> 标记

How to set up arrow keys to navigate through <img> tags in order?

本文关键字：浏览 顺序 标记 img 何设置 设置      更新时间：2023-09-26

我在我的页面上设置了一个"照片库"，它沿着底部显示一堆缩略图，用户可以单击图像以在主显示屏中查看它。

顶部/大图像设置如下：

<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 联系起来，或者如何知道哪个图像是"下一个"。

谢谢。

在

body 标记上添加一个onkeypress事件处理程序。

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

我建议用jQuery来做这件事。在箭头中添加类似id='showPrev'和id='showNext'的内容，以便您知道按下了哪一个。

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

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

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

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

你只需要决定并找到一种方法，你想识别图像[img:id='frame-#']（将#更改为实际数字）

相关文章：