隨機加載不在同一目錄內的圖像

Question

我想要在每次頁面重新加載時隨機加載圖像。然而，要使用的代碼不能只從特定目錄中選擇一張照片，但它需要每次隨機選擇一個預設路徑到不同目錄中的不同照片。

預設路徑有這些：

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和照片陣列的使用Math.random()然後通過隨機指數所選取的圖片更改源src每個負載長度的隨機整數生成：

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>