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

Question

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

我正在尝试向我的图片库幻灯片添加 'keyup' 功能（或类似的东西），以允许我的幻灯片在按下键盘上的向左或向右按钮时左右移动。

目前，我使用 CSS 个关键帧通过 left/right 按钮移动我的图像，但我也使用计时器来 play/pause 它们。

这是我的代码的样子（减去计时器）：


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 以使用键盘移动图像 left/right？任何帮助将不胜感激！

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);
    }
})

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

How do I add 'keyup' to my code to move my gallery slideshow left and right using the keyboard buttons?

javascript

css

keyboard

addeventlistener

css-animations