在JS中实现不重复显示随机多张图片的方法有多种,以下是一种常见的实现方式:
var images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
// 其他图片路径
];
var displayedImages = [];
function getRandomImage() {
// 如果所有图片都已经显示过,则重新开始
if (displayedImages.length === images.length) {
displayedImages = [];
}
var randomIndex;
var image;
// 循环直到找到一个未显示过的图片
do {
randomIndex = Math.floor(Math.random() * images.length);
image = images[randomIndex];
} while (displayedImages.includes(image));
// 将图片添加到已显示过的数组中
displayedImages.push(image);
// 在页面中显示图片
var imgElement = document.createElement('img');
imgElement.src = image;
document.body.appendChild(imgElement);
}
getRandomImage();
每次调用 getRandomImage()
函数时,它会从图片数组中随机选择一张未显示过的图片,并将其显示在页面中。当所有图片都显示过一次后,它会重新开始显示。
这是一个简单的实现方法,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云