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

时间:2013-11-10 11:42:32

标签: javascript php jquery html css

我目前有一些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。 / p>

P.S。解决方案不一定是javascript,如果有人知道如何改进我的PHP代码或可以提供代码有时失败的原因,这将是非常有帮助的。

2 个答案:

答案 0 :(得分:3)

首先创建一个图像数组:

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)] + ')'});

这应该没问题。

答案 1 :(得分:2)

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

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

$(function(){

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

这样你就可以继续使用你正在使用的文件夹,而不是改变任何东西。