现在本站的背景图片就是在一些图片中随机加载一张的。先贴代码吧:
<script language="javascript"> var bgarr = ["/f/aisaberbg1.jpg","/f/aisaberbg2.jpg","/f/aisaberbg3.jpg"]; var bgindex = Math.floor((Math.random()*bgarr.length)); document.body.style.backgroundImage="url("+bgarr[bgindex]+")"; </script>
注意:
1.没有加入是否会重复的判断,所以有时候可能连续两次都是一样的图片。本站现在有10张背景图片用来切换,如果连续三次四次看到的都是一样的图片,建议你买张彩票。
2.图片未加载完成之前可能无法显示背景图片,建议先在css中给body先设置一个背景颜色。图片被缓存之后基本就没什么问题了。我在chrome和firefox上只会感觉到图片切换,但是ie10我是无解了,不知道是读取缓存太慢还是怎么的,每打开一个页面总是会有一段时间背景显示为空白(今天在亲戚家发现ie11的效果和chrome、firefox一样)。这个问题我是不明觉厉,也不打算解决,直接升级ie算了,毕竟我只用chrome毕竟本站没人来我只是自己看。
3.这段代码我是放在body标签之后的,因此也没写onload事件,代码读取到就开始执行。如果是要放到head标签对之间,请自行加上onload,否则执行时会找不到body。
最开始我是在本地测试的,分分钟测试成功,便开始加在博客里,但是博客里代码繁多,遇到了各种问题,例如:
1.本来设置背景图那句代码使用了jq的css()方法,而且之前已经有jq了,但还是报错;
2.一度使用了onload方法,但是window.onload()加在头部生效,加在底部竟然不生效,明明整个页面就这一个onload;
3.改用了jq的$(window).load方法,但是和位于最底部的图片延迟加载的代码冲突了,这个插件无效了;
最后干脆的去掉了onload,用了原生js,直接放在头部。真累。
打开网页时设置随机背景图片
-
Google Chrome 59GNU/Linux x64 -
Firefox 50Windows 7 x64 Edition 留个爪印_(:з」∠)_
-
Google Chrome 55GNU/Linux x64 我写了for循环,如下:
var bgarr=new Array(50);
var link;
for (var i = 0; i < 50; i++) {
link = "http://saber-img.qiniudn.com/aisaberbg" + i + ".jpg"
bgarr[i]=link;
}
var bgindex = Math.floor((Math.random() * bgarr.length));
document.body.style.backgroundImage = "url(" + bgarr[bgindex] + ")";
但是发现一个问题,从0到50之间,有的图片是没有的,这样就会让背景空白了,但是楼主是怎样让自己的背景图片选项这么多的呢? -
Google Chrome 55GNU/Linux x64 我用了这个方法,结果只有三张图在变来变去。
-
Google Chrome 55GNU/Linux x64 楼主,您的背景图片目前应该不只这些了吧?因为看了这么久,发现您的背景图片不止十张。上面的代码是不是要修改?
楼主,我发现一个js生成很随机数的方法,请笑纳:
http://www.cnblogs.com/ayqy/p/4511565.html