首先要有一个添加背景图片的div

<div  id="myDiv"></div>

css样式中添加背景tu图

body{height:100%;}

#myDiv{background-image:url("img/yellow.jpg");height:100%;}         //注意添加的背景图一定要设置具体的数值高度才会显示,而这里用100%是不可能显示的,这就需要在这个div的父类元素(在这里也就是body了)设置height:100%。然后再给它设100%。才是有效的。并且高度是全屏的。

js代码:

var currentImg=Math.floor(Math.random()*3);   //也就是让currentImg取得0-3之间的随机值,可以I等于,0和3,这个是用来取图片的索引下标的。

var imgArr=['orange.jpg','green.jpg','yellow.jpg'];//定义一个数组来存放所有的图片

function  changeImg(){

var img=document.getElementById("myDiv");

img.style.backgroundImage="url(img/"+img[currentImg]+")"; //这里特别要注意引号的使用,因为img[curentImg]是个变量,所以用"+变量+"

}

最后执行这个函数就可以啦

changeImg();

上面就是每次打开页面或者刷新的时候会随机在三张图片中选一个。

如果想要每隔一段时间换一个的话,只需把js修改成:

var currentImg=0;   //这个是用来取图片的索引下标的。

var imgArr=['orange.jpg','green.jpg','yellow.jpg'];//定义一个数组来存放所有的图片

function  changeImg(){

if(currentImg>=imgArr.length){currentImg=0}  //当图片的索引超过图片数量就从第一个开始

else{currentImg++;}

var img=document.getElementById("myDiv");

img.style.backgroundImage="url(img/"+img[currentImg]+")"; //这里特别要注意引号的使用,因为img[curentImg]是个变量,所以用"+变量+"

}

后面执行时也有点不同需要用到setInterval

setInterval(changeImg,400);//每隔400ms就换一个

-------------------------------------

补充:

Math.random()     是(0 ,1) 
Math.random()*3   是(0,3)
Math.random()*3+1 是(1,4)
Math.floor(Math.random()*3+1) 是[1,4] 可以等于1,4  Math.floor()是向下取整

所以这里取图片的索引有两种写法:1.var currentImg=Math.floor(Math.random()*3); 然后直接就取这个currentImg

2,让他0开始加,加到和长度一样或者比长度长时就又从0开始。

最新文章

  1. VS2008控件全部消失
  2. asp.net mvc4+mysql做一个简单分页组件(部分视图)
  3. 28个Unix/Linux的命令行神器_转
  4. iOS 懒加载不起作用的原因
  5. C语言(函数)学习之strstr strcasestr
  6. python3.2 + PyQt4界面开发hello world
  7. h5 input file ajax实现文件上传
  8. 不容易系列之(3)—— LELE的RPG难题
  9. Java内存区域和GC机制篇
  10. linux文件系统操作——底层文件访问
  11. Oracle GoldenGate (以下简称ogg)在异种移植os同一种db之间的数据同步。
  12. P1546 最短网络 Agri-Net题解(克鲁斯卡尔)
  13. Scala学习教程笔记三之函数式编程、集合操作、模式匹配、类型参数、隐式转换、Actor、
  14. 安卓开发_深入理解Handler消息传递机制
  15. PostgreSQL的配置文件
  16. 实验吧—Web——WP之 上传绕过
  17. shell脚本传递带有空格的参数的解决方法
  18. 如何在LINUX中安装VM-Tools
  19. The Concept of a Process
  20. 程序媛计划——python正则表达式

热门文章

  1. jQuery EasyUI API 中文文档 - 表单(form补充)
  2. 关联规则( Association Rules)之频繁模式树(FP-Tree)
  3. Game Center Achievements and Leaderboards part 1 &lt;转&gt;
  4. 运用Unity实现AOP拦截器[结合异常记录实例]
  5. js实现回放拖拽轨迹-------Day48
  6. Timer使用
  7. Nginx常用配置整理
  8. js错误处理和调试
  9. linux 安装 登录 centos7
  10. mysql产生随机数并连接字符串