0

可能重复：
jQuery 事件按键：按下了哪个键？

我正在尝试将箭头键导航添加到我的网站代码并遇到一些问题。我不认为这可以用 html..maybe 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>
4

1 回答 1

0

一种方法是使用预制的“画廊”插件，例如其中之一： 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是右箭头键。如果是其中之一，它会模拟相应链接上的“点击”。

于 2012-04-24T02:38:03.553 回答