Jquery keydown事件导航图片滑块

Question

您好，我想将键盘导航添加到我的 css 滑块。滑块代码如下。

html

    <div class="imgdisplay">
      <ul>

        <li>
          <input type="radio" id="img1" name="slide" checked>
          <label for="img1"></label>
          <img src="work/legibile/render1.jpg">
        </li>

        <li>
          <input type="radio" id="img2" name="slide">
          <label for="img2"></label>
          <img src="work/legibile/render2.jpg">
        </li>

        <li>
          <input type="radio" id="img3" name="slide">
          <label for="img3"></label>
          <img src="work/legibile/render3.jpg">
        </li>
      </div>

css .img显示输入{ 显示：none }

.imgdisplay label{
 position: absolute;
 background-color: #BDBDBD;
 width:0.25em;
 height: 0.25em;
 border-radius: 100%;
 border: #BDBDBD 2.5px solid;
 top:-1.5em;
 cursor: pointer;
 margin: auto;
 z-index: 10
 }

.imgdisplay li:nth-child(1) label {
  left: 0em;
 }

.imgdisplay li:nth-child(2) label {
 left: 1.5em;
 }

.imgdisplay li:nth-child(3) label {
 left: 3em;
 }
.imgdisplay img {
 opacity: 0;
 visibility: hidden;
 }
 .imgdisplay li input:checked ~ img {
  opacity: 1;
  visibility: visible;
  z-index: 10;
 }

我想通过左右箭头键导航滑块。基本思想是代码首先检测检查的 ID "img #"。当用户按下右箭头键时，ID "img #+1" 将被检查。当用户按下左箭头键时，ID "img #-1" 将被选中。

我的问题是： 1.如何让代码检测到第一个的ID。 2. 我尝试了以下 jquery 代码只是为了熟悉 keydown 事件，但是页面内容消失了，我不知道为什么。

  $(document).keydown(function(e) {
if(e.keyCode == 37) { // left
  $("#img1").attr({"checked" });
  }
else if(e.keyCode == 39) { // right
  $("").attr({});
  }
});

Answer 1

以这种方式更改无线电输入的 id

img_1, img_2, img_3

并在文档就绪时执行以下代码。

$(document).keydown(function(e) {
    var checkedElmIdx =  parseInt($("[type='radio']:checked").attr("id").split("_")[1]);
   if(e.keyCode == 37) { // left
       $("#img_"+(checkedElmIdx-1)).prop("checked", true);
   } else if(e.keyCode == 39) { // right
        $("#img_"+(checkedElmIdx+1)).prop("checked", true);
   }
});

Jquery keydown事件导航图片滑块

Jquery keydown event navigate picture slider

navigation

jquery

slider

keydown