ランダム写真付きスライドショー

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

この関数を呼び出して適切に使用してください