Question

我正在使用“手动图库/幻灯片显示”，按指针可将您带到下一张/上一张图像。我已经使用'Button'元素创建了指针。现在，我只希望用户也可以使用向左/向右箭头键。

为了使“按钮”元素正常工作，我正在使用javascript。

<button class="left" onclick="plusDivs(-1)">&#10094;</button>
<button class="right" onclick="plusDivs(+1)">&#10095;</button>


<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = x.length
    }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}
</script>

我不确定从哪里开始，因为我从未使用过javascript，到目前为止，还没有找到很多有用的信息。希望有人可以将我推向正确的方向。

Answer 1

您将需要向Windows浏览器中通用的窗口对象添加事件侦听器。浏览器事件（例如“点击”）之类的元素冒出气泡，一直影响到窗口。

据我所知，击键是直接应用于窗口的。您将需要添加一个侦听器并侦听相应的键文本。我使用键文本而不是键代码，因为我发现它更具语义。使用console.log（e）探索keydown事件。 Google会根据您需要支持的浏览器来提供兼容性用例。

window.addEventListener("keydown", (e) => {
   if (e.key === "ArrowLeft"){
      plusDivs(-1);
   } else if (e.key === "ArrowRight"){
      plusDivs(1);
   }
}

似乎您正在使用嵌入在html中的内联函数调用。由于标准侦听器绑定是通过脚本而不是内联html完成的，因此您需要将上述侦听器放置在DOMContenLoaded侦听器中。...这通常将所有JavaScript代码包装在脚本中并执行它，而不是手动执行功能

document.addEventListener('DOMContentLoaded', function() {
    ...above code goes here...
    ...including all your existing code...
});

PS。您不需要做+1 ...只需做1，因为它已经是一个正整数。

如何设置按钮元素，以便可以使用箭头键控制它们？

1 个答案: