页面刷新时更改图像背景

Question

我希望 div id="img" 上的背景完整图像在页面重新加载时更改，这可以在纯 css 或 javascript 上完成吗？这是我的http://jsfiddle.net/9Dp2e/ 我正在使用带有 jquery 的 javascript 来随机更改背景图像，但我不能使用下面的代码，任何帮助将不胜感激。

Here is my html:
<div id="header">
<ul>
<div id="wrapper">
  <li class="logo"></li>
  <li>Homes</li>
  <li>Offices</li>
  <li>Products</li>
  <li></li>
  <li></li>
  </div>
</ul>

</div>
<div id="center">
<div id="slider">





<div id='footercopy'>

<p>Copyright 2014 &nbsp<a href=""></a></p>

</div>




<div id="img">

<img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Flaming_cocktails.jpg">

</div>


</body>
</html>

Here is my css:
html,body
{
height:100%;
}
body
{
font-family: 'Open Sans Condensed', sans-serif;
}
h1
{
font-size:30px;
}
#img
{
 position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#img img
{
 position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
#center
{
position:relative;
z-index:10;
top:0;
min-height:1000px;
background:white;
width:960px;
margin-right:auto;
margin-left:auto;
min-height:1000px;
padding:20px;
}
#header
{
position:relative;
z-index:20;
color:white;
position:fixed;
top:0;
width:1700px;
margin-right:auto;
margin-left:-10px;
background:silver;
opacity:0.7;
}
#wrapper
{
width:960px;
margin-right:auto;
margin-left:auto;
}
#header li
{
display:inline;
padding-right:20px;
}
.logo
{
font-family: 'Lobster', cursive;
font-size:30px;
color:blue;
}

/*content*/
#content
{
padding-top:80px;
width:500px;
}
.floatLeft 
{ 
float:left;
margin: 4px; 

}
.floatRight 
{ 
float: right; 
margin: 4px; 
}
#content img
{
width:100px;
height:100px;
padding:20px;
}
.width
{
width:250px;
padding:10px 30px;
}
#sidebar
{
margin-top:50px;
float:right;
min-height:1500px;
text-align:center;
}
#sidebar img
{
width:150px;
height:150px;
}
#sidebar li
{
list-style:none;
padding:10px;

}
#content-right
{
padding-top:80px;
width:450px;
float:right;
}
#content-right img
{
width:100px;
height:100px;
padding:20px;
}

Here is my javascript:
var images = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg', 'http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg', ];
$('#header').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
$('<img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#img');

Answer 1

您可以使用它...工作得非常好。刚刚编的:)

这个没有jQuery。无需在页面中加载繁重的脚本 :)

//You can increase the images by adding more links to the array 
var array = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg','http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg'];
function shuffle(array) {
var currentIndex = array.length;
var temporaryValue;
var randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
var shuffled_images = shuffle(array);
var yourbackground = document.getElementById('img');
yourbackground.style.backgroundImage = 'url(' + shuffled_images[0] + ')' ;

Answer 2

LINK 它正在使用您的逻辑，只需在小提琴中添加 jquery 并增加图像数量并删除不需要的只是为了检查。

Math.random() 介于 1 和 0 之间，因为我们只有两个值，所以不太可能表现得像随机一样

Answer 3

查看本教程：http://briancray.com/2009/12/28/simple-image-randomizer-jquery/

1. 从一组图像开始。 将数组中的图像文件名更改为实际文件名。不要包含目录——仅包含文件名。

   <i>This is not italic</i>, and [this is not a link](http://example.com)var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
   

2. 使用 jQuery 和 CSS background-image 设置随机背景

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

Answer 4

尝试使用： 在这里，你必须使用，

Math.random() with in Math.round() 因为，Math.round() 将您的返回值计算为 0 和 1，因此如果您只有两张图像，那么 Math.round() 表现良好，可能不会重复任何背景不止一次。

var images = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg', 'http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg', ];
var random = Math.round((Math.random()*images.length))

$('#background').css({'background-image':images[random]})

Answer 5

尝试绑定'beforeunload'：

$(window).bind('beforeunload',function(){
    /* change background */
});

如何从图像数组中读取图像？

• 读取cookie值（一个计数器）：如果没有值，则保存0值。
• 读取图片[count]
• 在 'beforeunload' 中保存为 cookie count+1（如果 count > images.length -> count=0）