ランダムな画像を同じディレクトリ内から読み込まない

Question

ページがリロードされるたびに画像がランダムにロードされます。しかし、使用するコードは特定のディレクトリから写真を選択するだけではありませんが、別のディレクトリにある別の写真へのプリセットパスの1つをランダムに選択する必要があります。

プリセットパスは、これらは以下のとおりです。

https://static.webshopapp.com/shops/054833/files/097622657/eddy-hilhorst-fotel-photography-courses-tours.jpg

https://static.webshopapp.com/shops/054833/files/097622663/hiromi-fujii-fotel-photography-courses-tours.jpg

https://static.webshopapp.com/shops/054833/files/097622666/jungsoon-suh-fotel-photography-courses-tours.jpg

いくつかのコードをここに以下。下のコードですでに表示されている写真を取り出してください。そこには何かが見えるようにしてください。

#myContainer { 
 
    position: absolute; 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: #ffffff; 
 
    margin-top: 30px; 
 
    border-radius: 75px; 
 
    overflow: hidden; 
 
    border-style: solid; 
 
    border-width: 8px; 
 
    border-color: #ffffff; 
 
    padding: 8px; 
 
} 
 

 
#myPhoto { 
 
    width: 150px; 
 
    height: auto; 
 
    margin-top: -8px 
 
}

<div id="myContainer"> 
 
    <img id="myPhoto" src=" https://static.webshopapp.com/shops/054833/files/097160429/eddyhilhorst-fotelphotographycoursesandtours-no-lo.jpg" /> 
 
</div>

Answer 1

var images = [ 
 
\t 'https://static.webshopapp.com/shops/054833/files/097622657/eddy-hilhorst-fotel-photography-courses-tours.jpg', 
 
     'https://static.webshopapp.com/shops/054833/files/097622663/hiromi-fujii-fotel-photography-courses-tours.jpg', 
 
     'https://static.webshopapp.com/shops/054833/files/097622666/jungsoon-suh-fotel-photography-courses-tours.jpg' 
 
]; 
 

 

 

 
var rand = images[Math.floor(Math.random() * images.length)]; 
 

 
document.querySelector('#myPhoto').src = rand;

<div id="myContainer"> 
 
    <img id="myPhoto" src=" https://static.webshopapp.com/shops/054833/files/097160429/eddyhilhorst-fotelphotographycoursesandtours-no-lo.jpg" /> 
 
</div>

今、あなたが、これはランダムの一部であるとして、行の数回を示したものと同じ画像を得ることも可能です。それは多くの画像ではあまり問題になりません。

Answer 2

あなたが生成さ0の間のランダムな整数とその後ランダムなインデックスを持つ選んだ絵でソースsrcを変更Math.random()を使用して、すべての負荷であなたの写真の配列の長さを選ぶことができます：このことができます

var pictures_array = []; 
var min=0; 
var max=pictures_array.length; 
var random = Math.floor(Math.random() * max) + min; 

$('#myPhoto').attr('src', pictures_array[random]); 

希望を。

var pictures_array = [ 
 
    'https://static.webshopapp.com/shops/054833/files/097622657/eddy-hilhorst-fotel-photography-courses-tours.jpg', 
 
    'https://static.webshopapp.com/shops/054833/files/097622663/hiromi-fujii-fotel-photography-courses-tours.jpg', 
 
    'https://static.webshopapp.com/shops/054833/files/097622666/jungsoon-suh-fotel-photography-courses-tours.jpg' 
 
]; 
 

 
var min=0; 
 
var max=pictures_array.length; 
 
var random = Math.floor(Math.random() * max) + min; 
 

 
$('#myPhoto').attr('src', pictures_array[random]);

#myContainer { 
 
    position: absolute; 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: #ffffff; 
 
    margin-top: 30px; 
 
    border-radius: 75px; 
 
    overflow: hidden; 
 
    border-style: solid; 
 
    border-width: 8px; 
 
    border-color: #ffffff; 
 
    padding: 8px; 
 
} 
 

 
#myPhoto { 
 
    width: 150px; 
 
    height: auto; 
 
    margin-top: -8px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myContainer"> 
 
    <img id="myPhoto" src="" /> 
 
</div>