为图片轮播组件添加键盘左右箭头控制功能

我懂这种卡壳的感觉——自动轮播已经正常工作了，可键盘控制就是搞不定，试了各种办法都没成功对吧？别着急，咱们基于你现有的代码来调整，很快就能实现需求。

核心思路 #

我们需要给整个文档添加键盘按键监听事件，当检测到左箭头（keyCode 37）或右箭头（keyCode 39）按下时，调整你的counter变量，然后对应选中对应的radio按钮，和自动轮播的逻辑保持一致。

修改后的完整代码 #

var counter = 1;
// 自动轮播定时器
var slideInterval = setInterval(function(){
    document.getElementById('radio' + counter).checked = true;
    counter++;
    if( counter > 4 ){
        counter = 1;
    }
}, 5000);

// 添加键盘控制监听
document.addEventListener('keydown', function(e) {
    // 左箭头按键：切换到上一张
    if (e.keyCode === 37) {
        counter--;
        // 边界处理：如果已经是第一张，跳转到最后一张
        if (counter < 1) {
            counter = 4;
        }
        document.getElementById('radio' + counter).checked = true;
    } 
    // 右箭头按键：切换到下一张
    else if (e.keyCode === 39) {
        counter++;
        // 边界处理：如果已经是最后一张，跳转到第一张
        if (counter > 4) {
            counter = 1;
        }
        document.getElementById('radio' + counter).checked = true;
    }
});

<div class="slider">
    <div class="slides">
        <input type="radio" name="radio-btn" id="radio1">
        <input type="radio" name="radio-btn" id="radio2">
        <input type="radio" name="radio-btn" id="radio3">
        <input type="radio" name="radio-btn" id="radio4">
        <div class="slide first">
            <img src="IMG/img1.jpeg" alt="">
            <div class="text-block">
                <h1>Specijalna bolnica za bolesti zavisnosti<br>"Dr Boro Lazić"</h1>
                <p>Prva licencirana klinika za bolesti zavisnosti u Srbiji, osnovana 2003. godine</p>
            </div>
        </div>
        <div class="slide">
            <img src="IMG/img2.jpeg" alt="">
            <div class="text-block">
                <h1>"Svako može pobeći iz pakla droge ako se odluči da preuzme prvi veliki korak, zatraži pomoć i prihvati je."</h1>
                <p>- Betty Ford -</p>
            </div>
        </div>
        <div class="slide">
            <img src="IMG/img3.jpeg" alt="">
            <div class="text-block">
                <h1>Who dares, wins!</h1>
                <p>"Mislila sam da je moj život gotov kada sam došla na kliniku, sada shvatam da je tek počeo."</p>
            </div>
        </div>
        <div class="slide">
            <img src="IMG/img4.jpeg" alt="">
            <div class="text-block">
                <h1>"Naš cilj je pronaći odgovarajući finansijsku soluciju za svakog pacijenta kako bi dobio tretman koji zaslužuje"</h1>
                <p>- Dr Boro Lazić -</p>
            </div>
        </div>
        <div class="navigation-auto">
            <div class="auto-btn1"></div>
            <div class="auto-btn2"></div>
            <div class="auto-btn3"></div>
            <div class="auto-btn4"></div>
        </div>
    </div>
    <div class="navigation-manual">
        <label for="radio1" class="manual-btn"></label>
        <label for="radio2" class="manual-btn"></label>
        <label for="radio3" class="manual-btn"></label>
        <label for="radio4" class="manual-btn"></label>
    </div>
</div>

额外优化可选（提升用户体验） #

如果你希望用户手动按键盘后，重置自动轮播的定时器（比如用户刚切了图片，不要马上又自动切换），可以修改键盘事件的代码：

document.addEventListener('keydown', function(e) {
    // 清除现有定时器
    clearInterval(slideInterval);
    
    if (e.keyCode === 37) {
        counter--;
        if (counter < 1) counter = 4;
        document.getElementById('radio' + counter).checked = true;
    } else if (e.keyCode === 39) {
        counter++;
        if (counter > 4) counter = 1;
        document.getElementById('radio' + counter).checked = true;
    }
    
    // 重新启动定时器
    slideInterval = setInterval(function(){
        document.getElementById('radio' + counter).checked = true;
        counter++;
        if( counter > 4 ) counter = 1;
    }, 5000);
});

这样用户手动操作后，自动轮播会从当前图片开始重新计时，体验会更友好。

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