Javascript图像更改onClick
我正在创建一个在单击时更改的图像。我的代码坏了怎么了Javascript图像更改onClick,javascript,image,onclick,Javascript,Image,Onclick,我正在创建一个在单击时更改的图像。我的代码坏了怎么了 <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"
<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>
指定尺寸时需要一个单位:
_img.style.width = "1920px";
_img.style.height = "1280px";
当索引换行时,您使用的是6,但它应该是5。更好的是,使用数组的长度,这样,如果数组发生更改,则不需要更改代码的该部分:
if(imgIdx > fNames.length) {
imgIdx = 0;
}