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

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

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

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

谢谢鲇鱼

来源

2017-07-05 Magdalena Dering

什么是不工作的。你有错误吗？阅读[this]（https://stackoverflow.com/help/mcve）;） – lumio

尝试使用此行（uncommented）：'document.onkeydown = checkKey;' – Kaddath

Imgaes不会更改，谢谢 –

你必须与你的脚本多个问题。

在这条线的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" />

来源

2017-07-05 09:05:12 NtFreX

NtFreX - 谢谢，现在代码对我来说是可以理解的;） –

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

回答

相关问题