如何设置Button元素以支持方向键控制图片轮播切换

嘿，恭喜你自己动手实现了图片轮播的按钮切换功能！方向键控制其实非常容易实现，我们只需要监听键盘的按键事件，然后直接复用你已经写好的plusDivs函数就可以，不用重新写切换逻辑～

具体步骤： #

1. 监听全局键盘事件：给整个文档（document）添加keydown事件监听，这样用户不管页面焦点在哪里，按下方向键都能触发图片切换。
2. 识别方向键类型：通过事件对象的属性判断用户按下的是左箭头还是右箭头，再调用对应的切换函数即可。

修改你的代码： #

把下面这段代码添加到你现有的<script>标签里，放在showDivs函数之后就可以：

// 监听键盘方向键事件
document.addEventListener('keydown', function(event) {
    // 左箭头按键，切换上一张
    if (event.key === 'ArrowLeft') {
        plusDivs(-1);
    }
    // 右箭头按键，切换下一张
    else if (event.key === 'ArrowRight') {
        plusDivs(1);
    }
});

补充说明： #

• 用event.key是更直观、语义化的写法，现在几乎所有现代浏览器都支持这种方式。
• 如果需要兼容一些非常老旧的浏览器，你也可以用keyCode（左箭头对应37，右箭头对应39），代码如下：

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 37) {
        plusDivs(-1);
    } else if (event.keyCode === 39) {
        plusDivs(1);
    }
});

完整的脚本示例： #

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";
}

// 新增的方向键控制代码
document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowLeft') {
        plusDivs(-1);
    } else if (event.key === 'ArrowRight') {
        plusDivs(1);
    }
});

这样用户按下左右方向键时，就会和点击切换按钮一样实现图片切换啦，是不是很简单😉

内容的提问来源于stack exchange，提问作者rcg__7