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开始。
JS实现背景图按时切换或者每次更新的更多相关文章
- JS编写背景图切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- hammer.js实现背景图手势缩放调整位置
<!DOCTYPE html> <html> <head> <script> function getxy(e){ var a=new Array() ...
- JS——百度背景图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- 整理今天js留下的作业(点击换图片换首页背景图)
<div class="buttons"> <button id="katong">卡通</button> <b ...
- texturepacker打包图片,场景切换时背景图有黑边
在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig ...
- 分享一个快速设置背景的js 自动获取背景图的长宽
我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...
- js 动态生成背景图 GeoPattern
以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...
- Node JS爬虫: 阮老师网站背景图
小白,轻喷,本文教你三分钟入门爬虫 前言 有一天发现,阮一峰老师的博客图片很好看,想收藏一下,因为几百张,一张张下载太慢,朋友推荐了个谷歌插件(Fatkun)确实挺好用的,这之后就对爬虫有了兴趣,这个 ...
随机推荐
- 解决 java.lang.ClassNotFoundException配置文件出错的问题
出现的原因: 1.jar包没有导入 2.jar包有冲突 3.jar包没有同步发布到自己项目的lib目录中 解决方案: maven构建工程的方式:项目点击右键 点击 Properties 选择Deplo ...
- Deferred content load was not performed. To provide the content, subscribe to the View's QueryControl event
{"Deferred content load was not performed. To provide the content, subscribe to the View's Quer ...
- 修改ASPCMS升级扩展功能
修改 inc/aspcms_templateFun.asp 查找"content=decodeHtml(rsObj("Content"))" 替换为”conte ...
- JAVA基础(10)——IO、NIO
转载:http://blog.csdn.net/weitry/article/details/52964948 JAVA基础系列规划: JAVA基础(1)——基本概念 JAVA基础(2)——数据类型 ...
- .Net Framemwork 之 值类型和引用类型的存储
C#把数据类型分为两种:值类型 和 引用类型.值类型存储在堆栈中,而引用类型存储在托管堆上. 一.值类型和引用类型变量的存储 首先,变量是存储信息的基本单元,而对于计算机内部来说,变量就相当于一块内存 ...
- com.android.support冲突的解决办法
All com.android.support libraries must use the exact same version specification (mixing versions can ...
- Android动画之旅-Android动画基本介绍
在上一篇博客中.我们简单了解了在Android中的动画特效.小伙伴们是不是意犹未尽呀. 还没有看的猛戳这里:Android动画之旅一开篇动画简单介绍 本篇博客.将和大家一起来分析Android中的四大 ...
- js 数组去重方法汇总
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 一学就会之ado.net(一)
ado.net十一组用于和数据源进行交互的面向对象类库.数据源能够是数据库也能够是文本文件.excel表格或者XML文件. 简单来说.ado.net就是与不同的数据源进行交互(增删改查)的. ado. ...
- Hacker - 世界上第一个黑客
http://juliet.iteye.com/blog/176525凯文·米特尼克,1964年生于美国加州的洛杉矶. 13岁时他对电脑着了迷,掌握了丰富的计算机知识和高超的操作技能,但却因为用学校的 ...