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