Diashow mit zufälligen Bildern

Question

Also habe ich diese kleine Diashow mit HTML/CSS/JS gemacht und ich möchte es so machen, dass die 6 Bilder zufällig und nicht 1,2,3 .. mehr wie 2,3,1 erscheinen. beispielsweise. Jede Hilfe wird geschätzt. Vielen Dank im Voraus.

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

Sie können einzigartige zufällige Bild Slider erstellen. Daher wird das Bild nicht mehrmals wiederholt (Sohams Antwort ist in Ordnung, aber es wiederholt das gleiche Bild mehrmals hintereinander).

Etwas wie folgt aus:

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; 
} 

I verwendet this SO beantworten.

Und dann in Ihrem Code nur diese Funktion aufrufen, wo Sie es brauchen.

Beispiel mit Ihrem Code nur für Autoslide ist hier https://jsfiddle.net/2gra4wk1/

Answer 2

Sie eine Funktion hinzufügen: -

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

Und dann rufen Sie diese Funktion und verwenden Sie entsprechend