你已经搞定了键盘事件监听的基础部分，接下来只需要把方向键的操作和页面上现成的切换按钮关联起来就可以啦！

核心思路 #

页面上的.prev-slide和.next-slide按钮已经具备了切换图片的功能，我们不需要重新编写切换逻辑，只需要在监听到左右方向键时，模拟点击对应的按钮即可。同时为了避免无效操作（比如第一张图按左箭头、最后一张图按右箭头），可以先判断按钮是否处于可用状态。

完善后的代码 #

$(window).bind('keydown', function(e){ 
  // 左方向键（keyCode 37）
  if (e.keyCode == 37) { 
    const prevButton = $('.prev-slide');
    // 检查按钮是否未被禁用（根据你的实际禁用类调整，比如有的用is-disabled）
    if (!prevButton.hasClass('disabled')) {
      prevButton.click(); // 触发上一张切换
    }
  } 
  // 右方向键（keyCode 39）
  else if (e.keyCode == 39) { 
    const nextButton = $('.next-slide');
    if (!nextButton.hasClass('disabled')) {
      nextButton.click(); // 触发下一张切换
    }
  }
  // 上下方向键如果不需要可以直接删除，或者保留用于调试
  // else if (e.keyCode == 38) { console.log('up'); } 
  // else if (e.keyCode == 40) { console.log('down'); } 
});

额外说明 #

1. 禁用类适配：不同的轮播插件给禁用按钮加的类名可能不同，比如有的用disabled，有的用is-disabled，你需要根据页面实际的DOM结构调整代码中的类名判断。
2. 直接调用轮播API（更可靠）：如果你的图片轮播是用第三方插件（比如Slick、Swiper）实现的，也可以直接调用插件的内置方法，比如：

   // 假设你的轮播容器选择器是.carousel-container
   // Slick插件示例
   if (e.keyCode == 37) {
     $('.carousel-container').slick('prev');
   } else if (e.keyCode == 39) {
     $('.carousel-container').slick('next');
   }
   

3. 确保jQuery已加载：因为你的代码使用了$，要确保页面已经正确引入了jQuery库，否则代码会失效。

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