Question

我目前有一个图像幻灯片，其中有随机图像，但是我似乎找不到一种方法来防止图像在开始时加载并应用随机过渡。有人可以帮忙吗？谢谢。

<< / p>

sin(x) #is wrong
math.sin(x) #is correct

Answer 1

以下代码从第一个图像开始，然后生成一个随机索引以选择下一个图像。这样可以避免连续两次选择同一张图片。

JS ：

function displayNextImage() {
    var bkX = x;
    x = (x === images.length - 1) ? 0 : Math.floor(Math.random() * images.length + 1);  

    //If new X is the same as old X and is not the last image, incremnt to avoid the same image twice in a row
    if (bkX === x && x !== images.length)
        x++;
    //If new X is the same as old X but is the last image, decrement
    else if (bkX === x && x === images.length)
        x--;
    console.log("x " + x);

    document.getElementById("img").src = images[x];
}

function startTimer() {
    setInterval(displayNextImage, 4000);
}

var trans=[]; 
var images = [
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/10.png" ,
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/11.png" ,
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/12.png" ,
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/13.png" ,
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/14.png"
], 
x = -1;

JSFIDDLE ： https://jsfiddle.net/xentd0fo/1/

Javascript随机图片，随机过渡幻灯片

1 个答案: