Question

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

我正在尝试向图库幻灯片中添加“键控”功能（或类似功能），以便在按键盘上的向左或向右按钮时允许幻灯片向左和向右移动。

此刻，我使用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";
    }

}

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

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

如何在代码中添加“键盘”以使用键盘按钮左右移动画廊幻灯片？

1 个答案: