一、前言
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>