javascript - 在页面刷新时更改背景图像

Question

我目前有一些 php 可以在每次刷新页面时更改 div 的背景图像。

在我的 HTML 头部我有这个

<?php 
$bg = rand(1, 6); 
$bgchange = $bg.".jpg"; 
?>

然后这个

<style type="text/css">
.cover {
  background-image: url('../img/backgrounds/<?php echo $bgchange; ?>');
}
</style>

正如您所看到的，这是一个非常简单的 php，它确实可以完成这项工作，但是当网站首次在计算机上加载或互联网速度很慢而无法加载图像时，我遇到了问题。

任何可以推荐解决方案的 javascript 人员我将不胜感激，我也认为 javascript 会更好，因为图像可以“淡入”等。我在我的项目中引用 jquery-1.10.2。

如果有人知道如何改进我的 php 代码或者可以提供代码有时失败的原因，那么 PS 解决方案不必是 javascript，那将非常有帮助。

score 3 · Accepted Answer

首先创建一个图像数组：

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];

然后，将随机图像设置为背景图像：

 $('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() *      images.length)] + ')'});

那应该没问题。

score 2 · Accepted Answer

您可以（并且应该）在 js 中执行此操作。

在文档加载功能上，您可以执行此操作。//文档加载函数

$(function(){

    var bgImage = (Math.floor(Math.random() * 6))+ ".jpg;"
    $('.cover').css('background-image',"../img/backgrounds/"+bgImage);
});

这样您就可以继续使用您正在使用的文件夹，而无需更改任何内容。

2 回答 2