Js实现随机选用本地图片

编程记·前端 · 08-11
Js实现随机选用本地图片

JavaScript实现本地图片随机输出,适合作为网页背景随机切换~

实现代码:

<!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>
前端 JavaScript
本站总计已被访问: 6921