Question

在setInterval中，如何在没有这种重复效果的情况下使用键传递幻灯片，当我将鼠标悬停在容器上并同时按下键来浏览图像时

这是codepen https://codepen.io/AlainBarrios/pen/BPayXO?editors=0010

评论的是arrowKeys函数，我确实使用键来移动图像，但是它根本无法正常工作，发生了奇怪的效果，我想像它与setInterval有关。

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
   .param{
       width:200px;
       padding:20px;
   }
   .userbackground{
       margin-left:14px;
   }
   .centering{
       width:300px;
   }
   .button_style{
       padding:10px;
   }
   .form_style{
       margin-top:5px;
   }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="centering" style="margin-left:auto;margin-right:auto;">

        <div class="form_style">
           <span class="param">Guest Name :</span>
            <asp:TextBox ID="name" runat="server" CssClass="userbackground"></asp:TextBox>
            <asp:RequiredFieldValidator runat="server" ID="reqName" ControlToValidate="name"  errormessage="*"><span style="COLOR: red">*</span></asp:RequiredFieldValidator>
        </div>

        <div class="form_style">
           <span class="param">Guest Number :</span>
            <asp:TextBox ID="phone"  runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator runat="server" Display="Dynamic" ID="RequiredFieldValidator1" ControlToValidate="name"  errormessage="*"><span style="COLOR: red">*</span></asp:RequiredFieldValidator>
        </div>

            <div class="button_style" align="center">
            <asp:Button ID="add" Text="Add Guest" runat="server" OnClick="add_Click" />
            <asp:Button ID="search" Text="Search it" runat="server" OnClick="search_Click"></asp:Button>
            </div>
         </div>

    </form>
</body>
</html>

Answer 1

使用onkeydown事件侦听器

键码：

const arrowKeys = () => {
    window.addEventListener("onkeydown", e => {
        if (e.key === 37) {
            prevControl.click();
            return false
        } else if (e.key === 39) {
            nextControl.click();
            return false
        }
    });
};

if (keyboard === "true") {
   arrowKeys();
}

使用箭头键并单击鼠标创建滑块

1 个答案: