Image change on pressing keyup and keydown

只愿长相守 提交于 2019-12-24 06:21:02

问题


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.


回答1:


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


来源:https://stackoverflow.com/questions/50434028/image-change-on-pressing-keyup-and-keydown

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!