Question

我尝试了之前提出的类似问题中提出的解决方案，但这些解决方案对我不起作用。下面是我的更新代码，以某种方式无法正常工作

这是我根据先前提出的问题建议更新的逻辑。

window.addEventListener('keydown', function (e) {
        // go to the right
        if (e.keyCode == 39) {
            gotoNextSlide();
        }
        // go to the left
        if (e.keyCode == 37) {
             gotoPrevSlide();
        }
    });

我已经创建了函数，但是在我的代码中该keydown()函数的调用位置却感到困惑因为我想通过同时单击“上一个”和“下一个”按钮并同时按任意键来更改幻灯片，我该怎么做？

这是我的script.js文件，我在其中创建了使用计时器和按钮分别转到上一张和下一张幻灯片的功能，但是通过单击“下一张”和“上一张”按钮手动更改了幻灯片，但是除此之外，我也想这样做通过键盘的左右键按下。

//script for generate one by one questions
var timer;

function gotoNextSlide() {
  timer && clearTimeout(timer);
  goToSlide(getCurrentSlide().index() + 1);
  timer = setTimeout(gotoNextSlide, 1000 * 60);
}

function gotoPrevSlide() {
  goToSlide(getCurrentSlide().index() - 1);
}

function getCurrentSlide() {
  return $("#slides .slide:visible");
}

function goToSlide(index) {
  var $slides = $("#slides .slide");
  if (index >= 0 && index < $slides.length) {
    $slides
      .removeClass("active")
      .eq(index)
      .addClass("active");
    $(".dot")
      .removeClass("active")
      .eq(index)
      .addClass("active");
  }
}

function init() {

  $(".goto-next-slide").click(gotoNextSlide);
  //timer for next question slide
  timer = setTimeout(gotoNextSlide, 1000 * 60);
  $(".goto-prev-slide").click(gotoPrevSlide);

  goToSlide(0);
}

$(document).ready(init);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="goto-next-slide overlay-button overlay-right">Next</a>
<a class="goto-prev-slide overlay-button overlay-left">Previous</a>

如何使用键盘的向右和向左箭头键转到下一张和上一张幻灯片？

0 个答案: