一、前言
emmm，纯html+css+js实现，css是为了让图片适应窗口（js调整图片我暂时不会）
就用了个随机数，，没sql好像实现不了统计文件夹图片文件数量（俺不会a，菜鸟勿喷），需要的参考参考，具体文件以及细节笔记都注释了哈~
二、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript实现访问随机背景图</title>
<style type="text/css">
/*设置背景图片铺满*/
body{
/*设置背景图片水平垂直居中*/
background-postion:center;
/*设置背景图不重复*/
background-repeat:no-repeat;
/*设置图片基于盒子大小自适应缩放保持比例*/
background-size:cover;
}
</style>
</head>
<body onLoad="loadingChange();">
<!--
也可以 onLoad 加载时自动执行方法
onLoad = "javascript:loadingChange();"
-->
<script>
function loadingChange(){
var FileNum,name,img
//文件夹内图片文件数量（图片从0开始命名如0.jpg）
fileNum = 15
//随机数生成一个文件名.jpg
name = Math.floor(Math.random()*fileNum)
img=name
var imgs
imgs= "img/"+name+".jpg"
//得到的imgs图片路径作为背景(图片存放在img文件夹下)
//随机获取本地图片后输出到网页
document.body.style.backgroundImage="url("+imgs+")" ;
/*自动加载设置超时自动执行实现
setTimeout("loadingChange()",1000); //1000ms后自动执行*/
}
</script>
</body>
</html>
4866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
