0

重複の可能性:
jQuery Event Keypress: どのキーが押されましたか?

ウェブサイトのコードに矢印キー ナビゲーションを追加しようとしていますが、いくつかの問題があります。これはhtml..多分javascriptではできないと思います...コードを書くのはかなり初めてで、このタイプのナビゲーションがどの程度サポートされているかわからないので、ここで少し迷っています。Facebook や他のブログの写真をナビゲートできるのと同じ方法で、私の Web サイト ( http://www.williameadon.com )内の写真をスクロールできるようにしたいと思います。すでに 2 種類のナビゲーションがあります。1 つは画面の左、右、インデックス アイコンをクリックするだけで、もう 1 つは画像を直接クリックして先に進むことができます。使いやすくするために、3 つのオプションすべてを用意したいと思います。助けていただければ幸いです。ありがとうございました。

これは、私が強化しようとしているコードの例です。

<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

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 は右矢印キーです。これらのいずれかである場合、対応するリンクの「クリック」をシミュレートします。

于 2012-04-24T02:38:03.553 に答える