如何将'keyup'添加到代码中以使用键盘按钮左右移动图库幻灯片？

Question

这是我在这里的第一个问题(也是我的第一个项目！(

我正试图在我的图片库幻灯片中添加"keyup"功能(或类似功能(，以允许我的幻灯片在按下键盘上的左键或右键时左右移动。

目前，我使用CSS关键帧通过左/右按钮移动图像，但我也使用了计时器来播放/暂停它们。

以下是我的代码(减去计时器(：

var indexOfSlides,slides,dots,captionText;
function startSlides(){
indexOfSlides = 0;
slides=document.getElementsByClassName("slide");
slides[indexOfSlides].style.opacity=1;
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerText=slides[indexOfSlides].querySelector(".captionText").innerText;
//disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
}
startSlides();
function addSlides(n) {
slideMover(indexOfSlides+n);
}
function slideMover(n){
var i;
var current,next;
var slideMoverAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>indexOfSlides) {
if(n >= slides.length){n=0;}
slideMoverAnimClass.forCurrent="moveLeftCurrentSlide";
slideMoverAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<indexOfSlides){
if(n<0){n=slides.length-1;}
slideMoverAnimClass.forCurrent="moveRightCurrentSlide";
slideMoverAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=indexOfSlides){
next = slides[n];
current=slides[indexOfSlides];
for (i = 0; i < slides.length; i++) {
slides[i].className = "slide";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(slideMoverAnimClass.forCurrent);
next.classList.add(slideMoverAnimClass.forNext);
dots[n].classList.add("active");
indexOfSlides=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerText=slides[n].querySelector(".captionText").innerText;
captionText.style.display="block";
}
}

有人知道我该如何添加keyup来使用键盘左右移动图像吗？任何帮助都将不胜感激！

Answer 1

您可以简单地添加密钥事件侦听器。

window.addEventListener('keyup', (e) => {
// assuming the indexOfSlides is the index of current slide and slide mover is the function to move to a specific slide
if(e.which == 37){
slideMover(indexOfSlides - 1);
}else if(e.which == 39){
slideMover(indexOfSlides + 1);
}
})