我在我的页面上设置了一个"照片库",它沿着底部显示一堆缩略图,用户可以单击图像以在主显示屏中查看它。
顶部/大图像设置如下:
<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-#']
(将#更改为实际数字)