случайные загрузки изображений не из одного каталога

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>