如何使用键盘事件更改幻灯片显示的图像

Question

我正在尝试在Javascript幻灯片中使用鼠标事件。 如何使用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

您可以尝试使用JQuery 热键插件

使您可以轻松地在代码中的任何位置添加和删除键盘事件的处理程序，从而支持几乎任何按键组合。

Answer 2

由于您只想在keyup事件中更改图像并且仅使用javascript，因此以下代码将起作用：

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 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然后使用e而不是event 。