首頁猿問如何使用javascript循環和...

如何使用javascript循環和數組顯示圖像幻燈片？

JavaScript

幕布斯6054654 2021-11-25 19:46:45

程序運行時，屏幕上只顯示最后一個數組值圖像，其他圖像不顯示。這是 HTML 代碼<img id="mg" alt="image not found">這是javascript代碼var images=["image", "image2","img","imag"]test();function test(){ var index = 0; for(var count=0; count<images.length; count++){ document.getElementById('mg').src = images[count] + ".jpg"; document.getElementById("mg").width = "500"; document.getElementById("mg").height = "300"; index = index + 1; setTimeout(test, 1000); if(index + 1 > images.length){ index = 0; count = 0; } }}

查看完整描述

3 回答

Qyouu

TA貢獻1786條經驗獲得超11個贊

function test(){

var index = 0;

for(var count=0; count<images.length; count++){

...

setTimeout(test, 1000);

...

}

setTimeout()這里不會做你認為它會做的事情。它不會在繼續之前引入延遲。它實際上告訴引擎關閉并自行計算 1,000 毫秒，而您的代碼繼續運行。

換句話說，您setTimeout()幾乎同時調用循環的長度。

我會這樣做：

const imageUrls = [

'first.jpg',

'second.jpg',

'third.jpg',

'fourth.jpg'

];

const imgEl = document.querySelector('img');

imgEl.src = imageUrls[0];

function advanceImage() {

imgEl.src = imageUrls[imageUrls.indexOf(imgEl.src) + 1] || imageUrls[0];

}

setInterval(advanceImage, 1000);

在這種情況下，我們將圖像初始化為第一個 URL。然后，我們每一秒都找出當前索引是什么，并在其中添加一個。如果我們到達數組中不存在的部分，則默認為第一個圖像 URL。

理想情況下，您根本不會為此使用任何 JavaScript 并使用 CSS 來完成，但我想無論如何我都會與您分享這個示例。

反對回復 2021-11-25

holdtom

TA貢獻1805條經驗獲得超10個贊

您不需要循環所有圖像，因為您的測試函數一次只需要一張圖像。您可以做的是將 currentIndex 存儲在函數之外并在每次執行時更新它。下面是一個例子：

var images = ["https://api.adorable.io/avatars/100/1", "https://api.adorable.io/avatars/100/2", "https://api.adorable.io/avatars/100/3", "https://api.adorable.io/avatars/100/4"]

var currentImage = 0;

test();

function test() {

// Update the image

document.getElementById('mg').src = images[currentImage] + ".jpg";

document.getElementById("mg").width = "100";

document.getElementById("mg").height = "100";

// Update the index for the next tick

currentImage += 1;

if (currentImage === images.length) {

currentImage = 0;

}

// Set next tick

setTimeout(test, 1000);

}

反對回復 2021-11-25

一只斗牛犬

TA貢獻1784條經驗獲得超2個贊

Do you have to use the loop? If not, try this:

<html>

<head>

</head>

<body>

var images=["image", "image2","img","imag"]

test();

var count = 0;

function test(){

console.log("I am executing with count at " + count);

document.getElementById('mg').src = images[count] + ".jpg";

document.getElementById("mg").width = "500";

document.getElementById("mg").height = "300";

if(count + 1 >= images.length){

count = 0;

}

else

{

++count;

}

setInterval(test, 1000);

</script>

</body>

</html>

setInterval 將確保該函數每秒被調用一次，并且將計數器移到函數外意味著它始終可以被訪問，并且您始終可以在數組中獲得正確的元素。

反對回復 2021-11-25

3 回答
0 關注
186 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用javascript循環和數組顯示圖像幻燈片？

如何使用javascript循環和數組顯示圖像幻燈片？

3 回答

添加回答

如何使用javascript循環和數組顯示圖像幻燈片？