Слайд-шоу со случайными фотографиями

Question

Итак, я сделал это маленькое Слайд-шоу с HTML/CSS/JS, и я хочу сделать так, чтобы 6 изображений отображались случайным образом, а не 1,2,3 ... больше, как 2,3,1 .. например. Любая помощь приветствуется. Спасибо заранее.

JS:

var imagecount = 1; 
var total = 6; 

function slide(x) { 
    var Image = document.getElementById('img'); 
    imagecount = imagecount + x; 
    if(imagecount > total){imagecount = 1;} 
    if(imagecount < 1){imagecount = total;} 
    Image.src = "images/img"+ imagecount +".jpg"; 
    ChangeText(imagecount); 
} 

window.setInterval(function slideA(x) { 
    var Image = document.getElementById('img'); 
    imagecount = imagecount + 1; 
    if(imagecount > total){imagecount = 1;} 
    if(imagecount < 1){imagecount = total;} 
    Image.src = "images/img"+ imagecount +".jpg"; 
    ChangeText(imagecount); 
}, 3000); 

function ChangeText(imgNum){ 
    var allImagesAndText = {1: "Seltene römische Goldmünze", 2: "Römische Funde", 3: "Römische Wandmalerei", 4: "Tutanchamun", 5: "Cheops Pyramide", 6: "Ägyptische Malerei"}; 
    document.getElementById("text1").innerHTML = allImagesAndText[imgNum]; 
} 

CSS:

#container { 
    height: 450px; 
    width: 650px; 
    margin: 20px auto; 
    position: relative; 
    z-index: 1; 
    border: 10px solid #000; 
    border-radius: 10px; 
} 
#img { 
    height: 450px; 
    width: 650px; 
} 
#left_holder { 
    height: 450px; 
    width: 100px; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
#right_holder { 
    height: 450px; 
    width: 100px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
} 
.left { 
    height: 50px; 
    width: 50px; 
    position: absolute; 
    top: 40%; 
    left: 0px; 
} 
.right { 
    height: 50px; 
    width: 50px; 
    position: absolute; 
    top: 40%; 
    right: 0px; 
} 
#text1 { 
    position: absolute; 
    color: #fff; 
    font-size: 32px; 
    background-color: #000; 
    opacity: 0.5; 
    left: 37%; 
    z-index: 2; 
} 

HTML:

<div id="container"> 
    <div id="text1">Text</div> 
    <img src="images/img1.jpg" id="img" /> 
    <div id="left_holder"> 
    <img onClick="slide(-1)" class="left" src="images/arrow_left.png" /> 
    </div> 
    <div id="right_holder"> 
    <img onClick="slide(1)" class="right" src="images/arrow_right.png" /> 
    </div> 
</div> 

Answer 1

Вы можете создать уникальный слайдер изображения. Таким образом, он не повторяет изображение несколько раз (ответ Соэма прекрасен, но он повторяет одно и то же изображение несколько раз подряд).

Что-то вроде этого:

var imagecount = 1; 
var total = 6; 
var uniqueRandoms = []; 

function makeUniqueRandom() { 
    if (!uniqueRandoms.length) { 
     for (var i = imagecount; i <= total; i++) { 
      uniqueRandoms.push(i); 
     } 
    } 
    var index = Math.floor(Math.random() * uniqueRandoms.length); 
    var val = uniqueRandoms[index]; 

    uniqueRandoms.splice(index, 1); 

    return val; 
} 

Я использовал this SO ответ.

И тогда в вашем коде просто вызовите эту функцию там, где она вам нужна.

Пример с кодом только для autoslide здесь https://jsfiddle.net/2gra4wk1/

Answer 2

Вы можете добавить функцию: -

function generateRandom(){ 
     var x = Math.floor((Math.random() * 6) + 1); //generates random number from 1 to 6 
     return x; 
    } 

А затем вызовите эту функцию и используйте ее надлежащим образом