如何让div背景图片刷新随机变换？

来源：百度知道 编辑：UC知道 时间：2024/06/05 20:38:03
如题。请问各位。

现在我用一个div做成了网页的菜单。
<div id="menu">
<ul>
<li>
<li>
<li><a href="sample.html">ABOUT</a>
<li>
<li>
<li>
<li><a href="sample.html">MAIL</a>
<li>
</ul>
</div>

然后在CSS中设置为
#menu{background:url(XXXX.jpg) bottom left no-repeat;width:800px;}

那么我想让上面设置的背景图每刷新一次就变成另一张图。要怎么做呢？
不是一般的图片变换哦（网上常见的设置N张图片随机切换），是指定的某个div的背景图。

JS要怎么写呢？请详细地写出来。多谢！！！剩下全分付出了。穷！~~
啊！很感谢，可是好像还是没效。我忘了说我还设置了以下这些，不知道是不是因此受影响了呢？？请指教！
另外就是我设置的这个效果是在博客当中的。所以图片的路径是不是要改呢？
#menu ul{
list-style-type:none;
margin:0px;padding:0px;
}
#menu li{
float:right;
margin:0px;padding:0px;
height:80px;width:80px;
background:url(XXX.png) top left no-repeat;
color:#a4a4a4;
font:bold 14px/80px Verdana;
text-align:center;

我写了2种方法..你自己看看吧...你的代码有点问题...li不成对..你有没有发现么...

<script>
window.onload=roll;
function roll(){
var menu=document.getElementById("menu");

//随机产生数..math.random()产生0-1之间的随机数..4代表4张图片....可以自己增加..math.floor获取整数部分.+1实现1-4图片的获取。

var rnd=Math.floor(Math.random()*4)+1;

//menu.className="menu"+rnd; //class实现;

//dom->获取style 采用驼峰写法..
menu.style.backgroundImage="url('image/"+rnd+".jpg')";

}
</script>
<style>
#menu{
width:100px;
height:100px;
background-repeat:no-repeat;
}

.menu1{
background:url("image/1.jpg");
}

.menu2{
background:url("image/2.jpg");
}

.menu3{
background:url("image/3.jpg");
}

.menu4{
background:url("image/4.jpg");
}
</style&