下面的代碼隨機顯示一個陣列中的一個影像。我一直試圖改變它但沒有成功隨機顯示陣列中的所有影像。我使用了一個 while 回圈來生成隨機函式。random 函式作業并隨機化整個陣列，但只回傳影像。陣列中有 8 個影像。
function DisplayImage(i) {
let CardImage = document.createElement('img');
CardImage.src = `Images/${images[i].img}`;
CardImage.alt = CardImage.src;
document.querySelector("#box").appendChild(CardImage);
}
謝謝
uj5u.com熱心網友回復：
您是否正在尋找類似這兩種方法的東西？
只隨機選擇一張圖片：
function DisplayImage(totalImages) {
const i = Math.floor(Math.random() * totalImages)
let CardImage = document.createElement('img');
CardImage.src = `Images/${images[i].img}`;
CardImage.alt = CardImage.src;
document.querySelector("#box").appendChild(CardImage);
}
或者隨機化所有影像：
function shuffle(array) {
let currentIndex = array.length, randomIndex;
while (currentIndex != 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
}
return array;
}
function DisplayImage(totalImages) {
const items = [...Array(totalImages).keys()]
const randomItems = shuffle(items)
randomItems.forEach(item => {
let CardImage = document.createElement('img');
CardImage.src = `Images/${images[item].img}`;
CardImage.alt = CardImage.src;
document.querySelector("#box").appendChild(CardImage);
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/317170.html
標籤：javascript 数组 图片
上一篇：如何在Flask中旋轉影像？
下一篇：使用tcia資料進行醫學成像