我不明白為什么這不起作用？請告訴我我在這段代碼中遺漏了什么 ** html **
<div id="img">
<img class="images"src="images/boy1.jpg">
</div>
** js **
var images = new Array();
images[0] = "/images/boy1.jpg";
images[1] = "/images/boy2.jpg";
images[2] = "/images/boy3.jpg";
images[3] = "/images/girl1.jpg";
images[4] = "/images/girl2.jpg";
function changeImg(){
let img = document.querySelector(".images");
for(let i=0;i<images.length;i ){
img.src = images[i]
}
}
document.getElementById("btn").addEventListener("click",changeImg)
uj5u.com熱心網友回復：
試試看：
var images = new Array();
images[0] = "/images/boy1.jpg";
images[1] = "/images/boy2.jpg";
images[2] = "/images/boy3.jpg";
images[3] = "/images/girl1.jpg";
images[4] = "/images/girl2.jpg";
function changeImg() {
const imgBox = document.getElementById("img");
for (let i = 0; i < images.length; i ) {
const img = document.createElement("img");
img.src = images[i]
imgBox.appendChild(img)
}
}
document.getElementById("btn").addEventListener("click", changeImg)<div id="img"></div>
<button id="btn">Start</button>uj5u.com熱心網友回復：
這是您希望達到的目標嗎？
var images = new Array();
var imgIndex = 0;
images[0] = "/images/boy1.jpg";
images[1] = "/images/boy2.jpg";
images[2] = "/images/boy3.jpg";
images[3] = "/images/girl1.jpg";
images[4] = "/images/girl2.jpg";
function changeImg() {
var myImg = document.getElementById("myImg");
if (imgIndex < images.length - 1) {
imgIndex ;
} else {
imgIndex = 0;
}
myImg.src = images[imgIndex];
}
document.getElementById("btn").addEventListener("click", changeImg);<div id="img">
<img id="myImg" class="images" src="images/boy1.jpg">
</div>
<button id="btn">Next</button>uj5u.com熱心網友回復：
您的 for 回圈會img.src立即更改五次，因此最終結果是images[4]，您看不到其他影像。
uj5u.com熱心網友回復：
您的回圈始終采用最后一張影像并將其設定為 img 標簽的來源，您需要做的是更改索引，然后僅將索引影像設定為來源：
const image = document.querySelector(".images");
let currentIndex = 0;
let images = new Array();
images[0] = "/images/boy1.jpg";
images[1] = "/images/boy2.jpg";
images[2] = "/images/boy3.jpg";
images[3] = "/images/girl1.jpg";
images[4] = "/images/girl2.jpg";
const length = images.length;
function changeImg(){
// increment currentIndex in a circular way; after 4 comes 0 again
currentIndex = currentIndex % length;
image.src = images[currentIndex];
}
document.getElementById("btn").addEventListener("click",changeImg);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/402086.html
標籤：javascript for循环