javascript - 通过按键箭头更改图像不起作用。

Question

我创建了通过单击箭头来更改图像的功能。我的功能不起作用。你能给我一些提示吗？

您可以在下面找到我的代码:

var imgs = [
  "assets/1.jpg",
  "assets/2.jpg",
  "assets/3.jpg",
  "assets/4.jpg",
  "assets/5.jpg",
  "assets/6.jpg",
  "assets/7.jpg"

];


function changeImage() {
  var img = document.getElementById("images");
  img_index = ++img_index % 7;
  img.src = imgs[img_index];
}


function checkKey(e) {

  e = e || window.event;
  if (e.keyCode == '37') {
    // left arrow
    changeImage();
  } else if (e.keyCode == '39') {
    // right arrow
    changeImage();
  }

}

// document.onkeydown = checkKey();

<img id="images" src="assets/1.jpg" />

谢谢你，梅吉

Answer 1

您的脚本存在多个问题。

• 删除此行末尾的()document.onkeydown = checkKey();。就像您所做的那样，您将直接调用该函数，而不是将其分配给事件。

• 您的示例中未定义 img_index 值，因此失败。您可以在开始时将其设置为0。

var img_index = 0;
var imgs = [
  "assets/1.jpg",
  "assets/2.jpg",
  "assets/3.jpg",
  "assets/4.jpg",
  "assets/5.jpg",
  "assets/6.jpg",
  "assets/7.jpg"

];


function changeImage() {
  var img = document.getElementById("images");
  img_index = ++img_index % 7;
  img.src = imgs[img_index];
}


function checkKey(e) {

  e = e || window.event;
  if (e.keyCode == '37') {
    // left arrow
    changeImage();
  } else if (e.keyCode == '39') {
    // right arrow
    changeImage();
  }

}

document.onkeydown = checkKey;

<img id="images" src="assets/1.jpg" />