Javascript 按时间随机图像

Question

我尝试按时间随机显示图像。但我需要不同的东西。

var images = []
images[0] = "img/y0.gif";
images[1] = "img/y1.gif";
images[2] = "img/y2.gif";
images[3] = "img/y3.gif";
images[4] = "img/y4.gif";

images[5] = "img/1.jpg";
images[6] = "img/2.jpg";
images[7] = "img/3.jpg";

usedImages = [];
setInterval(function () {changeImage();},100);

var changeImage = function () {
    var index = Math.floor(Math.random() * (images.length)),
    thisImage = images[index];

    usedImages.push(thisImage);
    images.splice(index, 1);

    if (images.length < 1) {
        images = usedImages.splice(0, usedImages.length);
    }

    var imgStr = '<img src="' + thisImage + '" alt = "">';
    document.write(imgStr); 
    document.close();
}           

我的代码可以工作，但如果图像是 gif，间隔时间必须为 500，或者如果图像是 image[2]，则时间必须为 500。

我该怎么做？

谢谢..

Answer 1

您可以在 changeImage 中使用 setTimeout(function, delay)，然后也可以首先调用 changeImage。这将使您能够更改每个图像的延迟:

var images = []
images[0] = "img/y0.gif";
// ...
images[7] = "img/3.jpg";

usedImages = [];

changeImage();

function changeImage() {
    var index = Math.floor(Math.random() * (images.length)),
    thisImage = images[index];

    // delay is 500 if image is .gif, and 100 if anything else
    var delay = thisImage.match(/\.gif$/) ? 500 : 100;
    setTimeout(changeImage, delay);

    usedImages.push(thisImage);
    images.splice(index, 1);

    if (images.length < 1) {
        images = usedImages.splice(0, usedImages.length);
    }

    var imgStr = '<img src="' + thisImage + '" alt = "">';
    document.write(imgStr); 
    document.close();
}