javascript:使用键盘跳到下一张图片

发布于 2024-12-05 18:37:53 字数 381 浏览 1 评论 0原文

我正在尝试制作用户友好的键盘导航,以便在垂直列表中的图像负载之间跳转。

例如:

<img src="1.jpg"><br>
<img src="x.jpg"><br>
<img src="9.jpg"><br>
<img src="1357.jpg"><br>
<img src="lol.jpg"><br>

我试图使右键盘箭头向下滚动一张图像,而左箭头将向上滚动一张图像。

我首先想到我可以在每个图像上方添加锚点,然后创建一个 JS 函数,当按下键盘箭头时该函数将转到这些锚点。但肯定有一种更聪明、更稳健的方法来做到这一点吗?

im trying to make userfriendly keyboard navigation for jumping between loads of images in a vertical list.

example:

<img src="1.jpg"><br>
<img src="x.jpg"><br>
<img src="9.jpg"><br>
<img src="1357.jpg"><br>
<img src="lol.jpg"><br>

im trying to make the right keyboard arrow scroll down one image, while the left arrow will scroll up one image.

i was first thinking i could add anchors above each image, and then make a JS function that will go to those anchors when the keyboard arrows are pressed. but there surely have to be a more clever and robust way of doing this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

世界等同你 2024-12-12 18:37:53

设置锚点。

引用列表中的锚点。

使用键盘循环浏览列表。

正如您所推荐的那样,这是执行此操作的标准方法。如果您想让它更加健壮,请将所有这些图像放在一个公共类中,并在运行时动态创建列表。

$.(".classname").each(function(){ add the element to the list as you see fit }

Set anchors.

Reference the anchors in a list.

Use the keyboard to cycle through the list.

As you recommended is the standard way to do it. If you want to make it more robust, then put all of those images in a common class, and dynamically create the list at runtime.

$.(".classname").each(function(){ add the element to the list as you see fit }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文