按键箭头更改图像不起作用。

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