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="http://i.stack.imgur.com/NjC6V.jpg" />
                    </div>
                    <div class="showSlide fade ">
                        <img src="http://i.stack.imgur.com/0eBBQ.gifg" />
                    </div>

                    <div class="showSlide fade ">
                        <img src="http://i.stack.imgur.com/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和which之类的较早的键事件属性，并且已经使用了一段时间。

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

1 个答案: