Question

我是JavaScript和这个社区的新手。如果以前曾经问过这个问题，我很抱歉，但我找到的关于这个主题的帖子并没有真正帮助我解决这个具体问题。

我想实现以下工作：

显示图像1。
如果按左箭头键（keydown），图像应更改为图像2。
如果您停止按（键盘），则应更改为图像3。
如果按右箭头键，则应更改为图像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

希望这有助于你

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img alt='' src="" id="myIMG">

＆＃13;

修改问题后更新

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img alt='' src="" id="myIMG">

＆＃13;

按下键盘和键盘时的图像更改

1 个答案: