随机加载不在同一目录内的图像

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>