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

下面有一些代码。应删除下面代码中已显示的照片。拥有它，所以现在可以看到一些东西。

＆＃13;

#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
}

＆＃13;

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

＆＃13;

Answer 1

var images = [
	'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

您可以使用Math.random()在每次加载中选择介于0和图片数组长度之间的随机整数，然后使用生成的随机索引将选定的图片更改为源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>

随机加载图像不是来自同一目录

2 个答案: