在按下键盘和按键时图像发生变化 [英] Image change on pressing keyup and keydown

问题描述

我是JavaScript和这个社区的新手。我很抱歉，如果这之前已被问到，但我发现这个主题的线程并没有真正帮助我解决这个具体问题。

我想实现以下工作：
$ b

1. 显示图片1。


2. 如果按左方向键（keydown）图片应该变成图片2.


3. 如果您停止按下（keyup），它应该变为图片3. 如果按右箭头键，它应该改变为图像4，并在按键上，改为图像5.

代码为：

 < img src =img / image1.pngid =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 = {}; 
 $ b $（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）; 
} 
 
 
}）; 
 
函数IMGLoop（）{
 if（keys [37]）{
 changeIMG（+3）; 
 
} else if（keys [39]）{
 changeIMG（+4）; 
} 
 
 setTimeout（IMGLoop，20）; 
} 
 IMGLoop（）; 
  

这个问题描述如下。
keyup没有做任何事情，keydown只有一次，然后我甚至不能在左右之间切换。
我需要用循环来做这件事，因为我也想在循环中做这些代码中没有显示的东西。

解决方案

希望这可以帮助您

  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 /图像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）{caseup：if（e.keyCode == 37）{changeIMG（2）; } else if（e.keyCode == 39）{changeIMG（4）; } break; casedown：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>  

I am new to JavaScript and this community. I apologize if this has been asked before, but the threads I found for this topic did not really help me with this specific problem.

I would like to achieve the following working:

1. Image 1 is displayed.
2. If you press the left arrow key (keydown) the image should change to image 2.
3. If you stop pressing (keyup), it should change to image 3.
4. If you press the right arrow key it should change to image 4 and on keyup, change to image 5.

The code is:

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

and

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

The issue is described below. The keyup does not do anything and the keydown only works once and then I can not even switch between left and right anymore. I need to do this with a loop because I also want to do other things on the loop that are not displayed in this code. I would appreciate any type of help.

解决方案

Hope this helps you

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">

---

Update after question edited

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">

这篇关于在按下键盘和按键时图像发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！