Как добавить «keyup» в мой код, чтобы перемещать слайд-шоу галереи влево и вправо с помощью кнопок клавиатуры? - PullRequest
Новая
       48

Как добавить «keyup» в мой код, чтобы перемещать слайд-шоу галереи влево и вправо с помощью кнопок клавиатуры?

0 голосов
/ 01 мая 2020

Это мой первый вопрос здесь (и мой первый в истории проект!)

Я пытаюсь добавить функциональность «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";
    }

}

Кто-нибудь знает, как я мог go добавить к этому keyup для перемещения изображения влево / вправо с помощью клавиатуры? Любая помощь будет высоко ценится!

1 Ответ

0 голосов
/ 01 мая 2020

Вы можете просто добавить слушатель события key up. 

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