Question

可能重复：
jQuery Event Keypress: Which key was pressed?

我正在尝试将箭头键导航添加到我的网站代码中并遇到一些问题。我不认为这可以通过html来实现。可能是javascript ...我很擅长编写代码并且在这里有点丢失，因为我不知道这种类型的导航支持多少。我只想滚动浏览我的网站（http://www.williameadon.com）中的图片，就像你可以浏览Facebook和其他博客上的图片一样。我已经有两种类型的导航，一种是您只需点击左侧，右侧，索引图标的屏幕，另一种是您可以直接点击图像进行推进。我想拥有所有三个选项以便于使用。我非常感谢你的帮助。谢谢。

以下是我尝试增强的代码示例。

<html>

    <title>AWE MAGAZINE - "SHE HAS EYES IN THE BACK OF YOUR HEAD"</title>
    <meta name="keywords" content="art wednesday, Rebecca Dayan, James Penfold, Max Bergius, Annabel Tollman, Sloane Sera, Eric Hauck, Tracy Alfajora, Manny Norena, Zach Vella, Bumble & Bumble, Nars Cosmetics, william eadon"/>

    <body bgcolor="#FFFFFF" alink="#000000" vlink="#000000" link="#000000">
        <table border="0" cellpadding="0" cellspacing="0" width="1095" bgcolor="white" height="0" align="left">
            <tr height="10" bgcolor="#FFFFFF">
                <td bgcolor="#FFFFFF" valign="top" align="left" width="20" height="10">&nbsp;</td>
                <td valign="top" align="left" nowrap bgcolor="#FFFFFF" width="1067" height="10">
                    <p>&nbsp;</p>
                </td>
                <td height="10" bgcolor="#FFFFFF"><font color="#f5f5f5">&nbsp;&nbsp;</font></td>
            </tr>
            <tr valign="top" align="left" height="500" bgcolor="#FFFFFF">
                <td width="20" bgcolor="#FFFFFF" height="500">&nbsp;</td>
                <td valign="top" align="left" width="700" height="500" bgcolor="#FFFFFF">
                    <font color="#000000" face="Times New Roman,Georgia,Times" size="2"><b><a href="http://www.williameadon.com">Index</a> &nbsp;&nbsp; &#60; &nbsp; <a href="awe2.html">&#62;</a> </b></font></p>
                    <p></p>
                    <p></p>
                    <p></p>




                    <p><a href="awe2.html"><img src="awe01.jpg" alt="" width="462" height="693" border="0">

                    </p>
                </td>
            </tr>
            <tr height="50" bgcolor="#FFFFFF">
                <td width="20" bgcolor="#FFFFFF" height="50"></td>
                <td width="1067" height="50" bgcolor="#FFFFFF">
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                </td>
                <td bgcolor="#FFFFFF" height="50">&nbsp;</td>
            </tr>
        </table>
        <p></p>


        <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12830353-1");
pageTracker._trackPageview();
} catch(err) {}</script>




    </body>

</html>

Answer 1

一种方法是使用预制的“图库”插件，例如以下其中一个： http://designmodo.com/jquery-image-sliders/

或者，如果你想使用你拥有的东西，只是听取按键，你可以使用jQuery：http://jquery.com/

然后执行以下操作：

$(function() {
    $("body").keyup(function(ev) {
        if (ev.which==37) $(".left-link").click();
        if (ev.which==39) $(".right-link").click();
    });
});

这假设您有以下内容：

<a href="awe2.html" class="right-link"><img src="next.jpg"></a>

说明：它监听按键，并检查按下按钮的“代码”; 37是左箭头键，39是右箭头键。如果是其中之一，它会模拟相应链接上的“点击”。

除了网站代码上的现有导航之外，如何添加箭头键导航（类似于Facebook上的图片导航）

1 个答案: