Javascript 图像更改 onClick

Question

我正在创建一个单击时更改的图像。 我的代码不工作有什么问题吗？

<div id="img"></div>
<script>
var fNames = ["SD1", "SD2", "SD3", "SD4"]; //File names
var _img = document.getElementById("img"); //Grabs images, groups them
var imgIdx = 0;
_img.style.position = "relative";
_img.style.left = "auto";
_img.style.right = "auto";
_img.style.width = "1920";
_img.style.height = "1280";
_img.style.backgroundImage = "url('images/"+fNames[imgIdx]+".jpg')";     //Retrieves images from file
_img.addEventListener("click", onImageClick); //Allows image click

function onImageClick() {
    imgIdx++;
    if(imgIdx == 6) {
        imgIdx = 0;
    }    
_img.style.backgroundImage = "url('images/"+fNames[imgIdx]+".jpg')";
}
</script>

Answer 1

指定大小时需要一个单位：

_img.style.width = "1920px";
_img.style.height = "1280px";

当使索引环绕时，您使用的是6 ，但它应该是5 。 更好的是，使用数组的长度，这样如果数组更改，您就不需要更改代码的那部分：

if(imgIdx > fNames.length) {
    imgIdx = 0;
}