按鍵箭頭更改圖像不起作用。

我創建了通過點擊箭頭改變圖像的功能。我的功能不起作用。你能給我一些提示嗎？按鍵箭頭更改圖像不起作用。

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

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 - 謝謝，現在代碼對我來說是可以理解的;） –

按鍵箭頭更改圖像不起作用。

回答

相關問題