키보드 이벤트를 사용하여 슬라이드 쇼의 이미지를 변경하는 방법

Question

자바 스크립트의 슬라이드 쇼에서 마우스 이벤트를 사용하려고합니다. 이미지를 변경하려면 keyup 이벤트를 어떻게 사용합니까? 텍스트 상자에 KeyUp을 사용하면 제대로 작동하지만 아래 이미지에서 사용하면 작동하지 않습니다. 다음과 같은 코드가 작동합니다 자바 스크립트 keyup 이벤트에만 사용에 대한 이미지를 변경하고자하기 때문에

<script> 
    var image=document.getElementById("x") 
    image.addEventListener("keyup",displaykey,false) 
    image.addEventListener("click",previous,false) 
    image.addEventListener("contextmenu",next,false) 

    var step=1; 
    function previous() 
    { 
     step--; 
     if(step==0) 
     { 
      step=3; 
     } 
     document.slide.src=eval("show"+step+".src") 
    } 
    function next(event) 
    { 
     step++; 
     if(step==4) 
     { 
      step=1; 
     } 
     document.slide.src=eval("show"+step+".src") 
     event.preventDefault() 
    } 

    function displaykey(event) 
    { 
     console.log(e.target) 
     var unicode=e.keyCode 
     event.preventDefault(); 
     if((unicode==33)||(unicode==38)) 
     { 
      previous(); 
     } 
     else if((unicode==40)||(unicode==34)) 
     { 
      next(); 
     } 
    } 
</script> 

Answer 1

는 :

document.onkeyup = function(e) { 
    var image = document.getElementById('x'); 

    //Left Key 
    if (event.keyCode == 37) { 
     previous(); 
     //Right Key 
    } else if (event.keyCode == 39) { 
     next(); 
    } 
} 

이 코드는 이미지의 onclick 이벤트를 실행합니다 당신은 때마다이 사용자가 왼쪽 또는 오른쪽 방향 키를 들어 올립니다. 원하는 경우 키 코드를 변경하고 더 추가 할 수 있습니다.

Answer 2

당신은

가 쉽게 추가하고 거의 모든 키 조합을 지원 어디서나 코드에서 키보드 이벤트에 대한 핸들러를 제거 할 수 있음을 JQuery와 hotkeys 플러그인을 사용하려고 할 수 있습니다.

Answer 3

function displaykey(event) { 
    console.log(e.target) 
    var unicode=e.keyCode 
    event.preventDefault(); 
    if((unicode==33)||(unicode==38)) { 
     previous(); 
    } else if((unicode==40)||(unicode==34)) { 
     next(); 
    } 
} 

나는 오류가 당신이 인수에 event을 통과 여기에 발생하고 event 대신 e를 사용하고있는 것.