js 更换背景图
2015-10-16 16:30
911 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0} body{background: #dddddd} #div1{ width: 100%; height: 100%; } </style> </head> <body id="div1" onload="showBgImage()"> </body> </html> <script> function showBgImage() { var curIndex = 0; //定义开始索引 var timeInterval = 1000; //定义切换时间, 1s=1000ms //定义存放图片数组 var arr = new Array(); arr[0] = "images/240.png"; //给数组每一项赋值,就是添加图片路劲 arr[1] = "images/340.png"; arr[2] = "images/240.png"; arr[3] = "images/340.png"; arr[4] = "images/240.png"; arr[5] = "images/340.png"; setInterval(changeImg, timeInterval); //调用显示图片方法(参数为:方法名和切换时间) function changeImg() { var obj = document.getElementById("div1"); //获得所要设置的元素 if (curIndex == arr.length - 1) { curIndex = 0; } else { curIndex += 1; } obj.style.backgroundImage = "url(" + arr[curIndex] + ")"; //设置获得元素的背景图片 } } </script>
相关文章推荐
- 二级联动下拉列表JS+html实现
- JSP-简单的练习省略显示长字符串
- 深入了解javascript--立即调用的函数表达式
- 通过两种方法实现在HTML页面加载完毕后运行某个js
- JSTL c标签使用及概述
- JSONP JSON CORS
- EXTJS组件化浅谈
- js总结
- JSON.parse()和JSON.stringify()使用介绍
- json_decode转换json数据为数组出现的问题!
- js提取正则中的字符串
- 正则表达式JS常见验证
- js判断undefined类型
- 分享一个C#通用的json操作类
- Javascript操作剪切板数据(支持IE、Chrome、360、搜狗),亲测!
- bower解决js的依赖管理
- 你不知道的JavaScript--Item5 全局变量
- 你不知道的JavaScript--Item5 全局变量
- 有关Chrome下锚点定位失效的问题
- JS不弹出网页文件下载本地