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 .imgdisplay input { 显示：无 }

.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事件导航图片滑块

1 个答案: