按下 keyup 和 keydown 时的图像变化

Question

我是 JavaScript 和这个社区的新手。如果之前有人问过这个问题，我深表歉意，但我为这个主题找到的主题并没有真正帮助我解决这个特定问题。

我想实现以下工作：

1. 显示图像 1。
2. 如果您按左箭头键 (keydown)，图像应更改为图像 2。
3. 如果您停止按 (keyup)，它应该会变为图像 3。
4. 如果你按右箭头键，它应该会变成图像 4，在键盘上，会变成图像 5。

代码是：

<img src="img/image1.png" id="myIMG">

和

var imgs = ["img/image5.png", "img/image3.png", "img/image1.png", "img/image4.png"];

function changeIMG(dir) {
    var img = document.getElementById("myIMG");
    img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
}

        var keys = {};

$(document).keydown(function (event) {
    keys[event.which] = true;
}).keyup(function (event) {


    if(e.keyCode == 37){
         delete keys[37];
        changeIMG(+1);
}
else if(e.keyCode == 39){
    delete keys[39];
    changeIMG(+2);
}


});

function IMGLoop() {
    if (keys[37]) { 
        changeIMG(+3);

    } else if (keys[39]) { 
        changeIMG(+4);
    }

    setTimeout(IMGLoop, 20);
}
IMGLoop();

该问题如下所述。 keyup 什么都不做，keydown 只工作一次，然后我什至不能再左右切换了。 我需要使用循环来执行此操作，因为我还想在循环中执行此代码中未显示的其他事情。我将不胜感激任何类型的帮助。

Answer 1

希望对你有帮助

var imgs = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQgz2HMpGysZL6ifYfhqWASDoA0b2MyX-gyMuQszgYRv87yr9qug",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQV3JL_HtVvlLr3Xy-KQV5MNmIF2-kCb9cHB4oXkUKQ1jiLT0H",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgDmo-5YpwYK9Yc35CK1oq3Y2zHDnXlu3q6m7GnSvLarDTRl0B",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt2dZklq8eDbsNL1vZ0MTwZsm0KWDIxl6YifmbUqjPiE5lOmIe"
];
var showImageName = 2;

function changeIMG(dir) {
  var img = document.getElementById("myIMG");
  img.src = imgs[dir];
  img.alt = dir;
}

var keyPressed = false;

function f(e) {
  if (e.keyCode == 37) {
    showImageName--;
    if (showImageName == -1) {
      showImageName = imgs.length - 1;
    }
    changeIMG(showImageName);
  } else if (e.keyCode == 39) {
    showImageName++;
    if (showImageName == imgs.length) {
      showImageName = 0;
    }
    changeIMG(showImageName);
  }
}

$(document)
  .keydown(function(e) {
    if (!keyPressed) {
      keyPressed = true;
      f(e);
    }
  })
  .keyup(function(e) {
    if (keyPressed) {
      keyPressed = false;
      f(e);
    }
  });

changeIMG(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img alt='' src="" id="myIMG">

---

问题编辑后更新

var imgs = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQgz2HMpGysZL6ifYfhqWASDoA0b2MyX-gyMuQszgYRv87yr9qug",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQV3JL_HtVvlLr3Xy-KQV5MNmIF2-kCb9cHB4oXkUKQ1jiLT0H",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgDmo-5YpwYK9Yc35CK1oq3Y2zHDnXlu3q6m7GnSvLarDTRl0B",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt2dZklq8eDbsNL1vZ0MTwZsm0KWDIxl6YifmbUqjPiE5lOmIe",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnDWTv5oLaNgUm_SXQFSzzBJl-21c7wLCC6Hgld-ndQ1k0knly"
];
var showImageName = 2;

function changeIMG(dir) {
  var img = document.getElementById("myIMG");
  img.src = imgs[dir];
  img.alt = dir;
}

var keyPressed = false;

function f(e, str) {
  switch (str) {
    case "up":
      if (e.keyCode == 37) {
        changeIMG(2);
      } else if (e.keyCode == 39) {
        changeIMG(4);
      }
      break;
    case "down":
      if (e.keyCode == 37) {
        changeIMG(1);
      } else if (e.keyCode == 39) {
        changeIMG(3);
      }
      break;
  }
}

$(document)
  .keydown(function(e) {
    if (!keyPressed) {
      keyPressed = true;
      f(e, "down");
    }
  })
  .keyup(function(e) {
    if (keyPressed) {
      keyPressed = false;
      f(e, "up");
    }
  });

changeIMG(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img alt='' src="" id="myIMG">