javascript - onkeydown 事件用于使用箭头键更改图像

Question

设置左右箭头键图像导航脚本时遇到问题

<script type="text/javascript">

        document.onkeydown = function(event) {
            var e = event || window.event;
            if (e.key === '37') { //LEFT
                nextSlide(-1);
            } else if (e.key === '39') { //RIGHT
                nextSlide(1);
            }
        };

        var slide_index = 1;
        displaySlides(slide_index);

        function nextSlide(n) {
            displaySlides(slide_index += n);
        }

        function displaySlides(n) {
            var i;
            var slides = document.getElementsByClassName("showSlide");
            if (n > slides.length) { slide_index = 1 }
            if (n < 1) { slide_index = slides.length }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slides[slide_index - 1].style.display = "block";
        }
    </script>

这是 html

     <div class="slidercontainer  ">
                    <div class="showSlide fade ">
                        <img src="/image/NjC6V.jpg" />
                    </div>
                    <div class="showSlide fade ">
                        <img src="/image/0eBBQ.gifg" />
                    </div>

                    <div class="showSlide fade ">
                        <img src="/image/uhjjB.png" />
                    </div>

<!--                     Navigation arrows-->
                    <a class="left" onclick="nextSlide(-1)">❮</a>
                    <a class="right" onclick="nextSlide(1)">❯</a>
                </div>

希望能够使用键盘左右箭头更改到下一个或上一个图像

Answer 1

key values for navigation keys不应该是数字或数字字符串。

if(e.key === 'ArrowRight') { //RIGHT

和

if(e.key === `ArrowLeft`) {  //LEFT

应该在当前浏览器中工作。根据链接，您可能还需要测试“左”和“右”的键值以支持某些较旧的浏览器。

请注意旧的关键事件属性，例如 charCode、keyCode 和 ，它们已被弃用并且已经存在了一段时间。