Question

我有一个用于浏览产品图片的灯箱滑块，我希望用户能够使用键盘上的箭头键来浏览图片，而不必单击箭头并使用ESC键以关闭灯箱。

灯箱滑块代码：

  // T50 Lightbox
    // Open the Modal
    function openModal() {
      document.getElementById('T50Lightbox').style.display = "block";
    }

    // Close the Modal
    function closeModal() {
      document.getElementById('T50Lightbox').style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    // Thumbnail image controls
    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("T50-Slides");
      var dots = document.getElementsByClassName("demo");
      var captionText = document.getElementById("caption");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
      captionText.innerHTML = dots[slideIndex-1].alt;
    }

我有以下代码使用ESC键关闭菜单，如何将其与箭头键一起应用于灯箱？

    function closeMenu() {
        $(".menu-trigger").removeClass("open");
        $(".navigation").removeClass("nav-open");
        $(".col").removeClass("c-in");
      }

    $(document).keyup(function(e) {
      if (e.keyCode == 27) {
        closeMenu();
            }
      });

Answer 1

您可以像对esc键一样来为箭头键添加侦听器。箭头键的键代码为：-

left arrow  37
up arrow    38
right arrow 39
down arrow  40

您可以编写以下代码：-

$(document).keyup(function(e) {
   if (e.keycode === 27) {
     closemenu();
    }
    if(e.keycode === 37) {
      // code for showing next slide
        plusSlides(n)
      }
     // same for other keys
   }

将键盘控件添加到滑块

1 个答案: