Javascript随机图像，随机转换幻灯片

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

改变形象 函数displayNextImage（）{ x=（x==images.length-1）？0:x+1； document.getElementById（“img”）.src=images[x]； } 函数startTimer（）{ 设置间隔（displayNextImage，4000）； } var trans=[ ]; 变量图像=[ "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；

---

以下代码从第一张图像开始，然后生成随机索引以选择下一张图像。它避免了在一行中选择同一图像两次

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：

---

图片11和14不存在！有没有办法给图像添加随机过渡？谢谢。当我添加更多图片时，幻灯片就会卡住。我在数组中添加了大约200个图像，但在测试时，幻灯片不会继续显示下一个图像。请帮忙。

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;