我目前在我的网站上有一张停滞不前的图像：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/stylesheets/normalize.css" media="all" rel="stylesheet" />
<link href="/stylesheets/master.css" media="all" rel="stylesheet" />
<script>
window.onload = function () {
var images = [],
i=1, indexImages = true,
prefix = '../image/',
extension = '.jpg';
while (indexImages) {
var a = new XMLHttpRequest(); a.open('GET', prefix+i+extension, false); a.send();
if (a.status != 404) { i += 1; images.push(prefix+i+extension); } else {
indexImages = false;
localStorage['backgroundIndex'] = !localStorage['backgroundIndex']?0:+localStorage['backgroundIndex']+2>images.length?0:+localStorage['backgroundIndex']+1;
document.body.style.backgroundImage = 'url(' + images[+localStorage['backgroundIndex']] + ')';
}
}
}
</script>
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: black;
border-bottom: 8px solid #7D8A28;
}
</style>
</head>
<body>
<section id="card">
</section>
</body>
</html>
只是我希望每次页面刷新时它都是一个不同的图像，所以它自动更改为2.jpg，3.jpg，10.jpg，等等。 （有数百种可供选择）
有人可以帮我解决问题吗？我不是很擅长这个，这是我的第一个网站。
感谢。
答案 0 :(得分：1)
我不认为CSS可以做到这一点，这是一个答案：
window.onload = function () {
var images = [
'image/1.png',
'image/2.png',
'image/3.png',
'image/4.png'
];
document.body.style.backgroundImage = 'url(' + images[Math.floor(Math.random()*images.length)] + ')';
}
每次访问页面时都会加载一个随机图像。
<小时/>
按顺序加载它们：第一次image1，第二次image2。 这些图片甚至不需要一个数字就可以正常工作。做：
window.onload = function () {
var images = [
'image/A.png',
'image/B.png',
'image/C.png',
'image/D.png'
];
localStorage['backgroundIndex'] = !localStorage['backgroundIndex']?0:+localStorage['backgroundIndex']+2>images.length?0:+localStorage['backgroundIndex']+1;
document.body.style.backgroundImage = 'url(' + images[+localStorage['backgroundIndex']] + ')';
}
这将自动为您生成阵列，您无需提供图像数量
window.onload = function () {
var images = [],
i = 1,
prefix = 'image/',
extension = '.png',
max = 1000;
function index() {
var a = new XMLHttpRequest();
a.open('GET', prefix + i + extension, false);
a.send();
a.onreadystatechange = function () {
if (a.readyState === 4) {
if (a.status != 404) {
i += 1;
images.push(prefix + i + extension);
i < max ? index();
} else {}
localStorage['backgroundIndex'] = !localStorage['backgroundIndex'] ? 0 : +localStorage['backgroundIndex'] + 2 > images.length ? 0 : +localStorage['backgroundIndex'] + 1;
document.body.style.backgroundImage = 'url(' + images[+localStorage['backgroundIndex']] + ')';
}
};
}
index();
}
<小时/>
如果你有PHP，这在许多情况下可能是最好的解决方案。 但如果可以避免使用PHP，你真的不想使用PHP 。 它将获取目录中的所有图像以生成数组：
window.onload = function () {
var images = (JSON.parse("<?=scandir('../images')?>")||[]).filter(function (a) { return ['.', '..'].indexOf(a) < 0; });
document.body.style.backgroundImage = 'url(' + images[+localStorage['backgroundIndex']] + ')';
};
答案 1 :(得分：1)
您可以使用JavaScript轻松完成。您可以使用所有图像定义一个数组，然后在每次加载页面时创建一个随机数。然后使用随机数访问数组的索引以读取图像的名称。像这样：
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"];
var randomNumber = Math.floor((Math.random() * images.length));
//images[randomNumber] contains your random image
希望它有所帮助。 的问候，
答案 2 :(得分：0)
我看到所有这些JS解决方案，但很可能你需要一个php解决方案，因为我相信你不想把数百个图像的名字放在一个文件中。所以如果你对php中的编程有一些了解，那就试试吧。
生成一个随机数。假设它是42
您可以将文件名直接放在css中，也可以将php页面作为返回图像的背景图像源。无论哪种情况，上述步骤都会给你你想要的东西。
如果文件名和类型不同，以上情况也适用。但是，如果文件名是数字的并且所有文件都是相同的扩展名，那么只生成一个数字并将其用作文件名比上述方法略快。
然而，它仍然比大多数JS解决方案更快。请记住，JS是客户端的。这意味着它将在加载该页面后执行。使用JS，文件需要尽可能少。否则，页面将加载，并且在返回该请求之前您将没有后台。考虑到所有这些延迟，我不会将JS称为高效PHP。
虽然你总能把它变得漂亮并且淡入它或者其他东西：）
答案 3 :(得分：-1)
使用PHP的额外好处是我们可以做到这一点所以你要做的就是将图像放到一个文件夹中，它会自动添加到随机列表中！这对于可维护性非常有用。你编码一次，不管它！
在我看来，使用AJAX没有额外的好处。无论何时添加图像，都必须将其添加到JS图像数组中。但是，我不知道你的具体情况。
到目前为止，提到PHP的所有其他解决方案都没有提到一个非常重要的部分......您正在使用的页面必须被解析为PHP文件。 有两种方法可以做到：
（我的解决方案要求您的页面被解析为PHP）
我会使用JavaScript从PHP生成的列表中随机选择图像，然后附加CSS以将背景图像应用到<script type="text/javascript">
<?php
// Path to image can be a relative or absolute path. I recommend absolute.
// The following is my absolute path.
$img_dir_path = '/rand-img/images/';
// Get directory list. If using absolute, prepend $_SERVER['DOCUMENT_ROOT'] for php
$dir_listing = scandir($_SERVER['DOCUMENT_ROOT'].$img_dir_path, 1);
// array_diff() to remove '.' & '..' from front of $dir_listing array
$img_array = array_diff( $dir_listing, array('.', '..') );
?>
// JavaScript variables
var img_dir_path = '<?php echo $img_dir_path ?>';
var img_array = <?php echo json_encode($img_array) ?>;
var rand_index = Math.floor(Math.random() * img_array.length);
var img_path = img_dir_path + img_array[rand_index];
// no need to wait for window.onload if we append actual style tag
var css = 'body { background-image: url('+img_path+') !important; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
</script>
事件之前的页面。
将以下内容附加到页面头部：
<?php
// Path to image can be a relative or absolute path. I recommend absolute.
// The following is my absolute path.
$img_dir_path = '/rand-img/images/';
// Get directory list. If using absolute, prepend $_SERVER['DOCUMENT_ROOT'] for php
$dir_listing = scandir($_SERVER['DOCUMENT_ROOT'].$img_dir_path, 1);
// array_diff() to remove '.' & '..' from front of $dir_listing array
$img_array = array_diff( $dir_listing, array('.', '..') );
// Random number based off size of $img_array
$random_index = mt_rand(0, count($img_array)-1);
// Build image path
$image_path = $img_dir_path . $dir_listing[ $random_index ];
?>
<style type="text/css">
body {
background-image: url("<?php echo $image_path ?>");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: black;
border-bottom: 8px solid #7D8A28;
}
</style>
使用PHP随机，只有在没有缓存的情况下加载页面时才有效。 但是，即使实际页面已缓存，使用JavaScript也会使图像随机化。
根据我的经验，此解决方案将绝大部分时间随机化图像。但是，如果页面是通过缓存加载的，则背景图像将不会重新随机化。
将以下内容附加到页面头部：
{{1}}