2016-10-03 9 views
-1

これで、配列を使ってグリッドに画像をランダムに表示するためにjavascriptを使用した。私が持っている問題は、ランダムな画像を取得してから同じ画像を2回取得することがあるということです。私は以下の私のコードを掲載しますが、それは画像が表示されたら、それはその画像を表示しないように、私はちょうどソリューションを探していました、再び配列から写真のグリッドに画像をランダムに表示するjavascriptコードを作ったが、画像を繰り返さないようにする。

これが私のjavascriptです:これは私のhtml

ある

var random_images_array = ['atoodbranding2.png', 'thebegining.jpg', 'ella_playin_in_the_yard.png', 'project-1.png','Frontier-attachments-for-sale.png','ipfwadd-01.jpg','invites.png']; 

function getRandomImage(imgAr, path) { 
    path = path || 'images/portfolio/'; // default path here 
    var num = Math.floor(Math.random() * imgAr.length); 
    var img = imgAr[ num ]; 
    var imgStr = '<img src="' + path + img + '" alt = "">'; 
    document.write(imgStr); document.close(); 
} 

<div class="container photo-container bg-3 text-center"> 


     <div class="photos"> 
     <a data-toggle="modal" id="1" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a> 
     <a data-toggle="modal" id="2" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a> 
     <a data-toggle="modal" id="3" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a> 
     <a data-toggle="modal" id="4" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a> 
     <a data-toggle="modal" id="5" href="#myModal"> <script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a> 
     <a data-toggle="modal" id="6" href="#myModal"> <script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a> 
     <a data-toggle="modal" id="7" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a> 
</div> 
</div> 

これはあなただけの選択を継ぐことができ、質問、すでに答えまたは超簡単修正

+0

既に表示しているインデックスの配列を維持します。 'random'関数が既にその配列にあるものを返す場合は、配列に含まれなくなるまで別の乱数を取得します。 – dman2306

+0

ランダムな番号の配列を生成し、それを繰り返します。これを参照してください。http://stackoverflow.com/questions/18806210/generating-non-repeating-random-numbers-in-js – bryan60

+0

または、最初に[シャッフル]( http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)配列を次にループします – j08691

答えて

1

ある1れてthatsのされている場合、私はとても残念JavaScriptにかなり新しいです配列の外にある画像は、次の繰り返しでは使用できません。

function getRandomImage(imgAr, path) { 
    path = path || 'images/portfolio/'; // default path here 
    var num = Math.floor(Math.random() * imgAr.length); 
    var img = imgAr[ num ]; 
    // remove the selected image 
    imgAr.splice(num, 1); 
    var imgStr = '<img src="' + path + img + '" alt = "">'; 
    document.write(imgStr); document.close(); 
} 
+0

@AustinBealeを手伝ってうれしい:) –

関連する問題