首先要有一个添加背景图片的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实现背景图按时切换或者每次更新的更多相关文章

  1. JS编写背景图切换

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. hammer.js实现背景图手势缩放调整位置

    <!DOCTYPE html> <html> <head> <script> function getxy(e){ var a=new Array() ...

  3. JS——百度背景图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

  5. 整理今天js留下的作业(点击换图片换首页背景图)

    <div class="buttons"> <button id="katong">卡通</button>    <b ...

  6. texturepacker打包图片,场景切换时背景图有黑边

    在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig ...

  7. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

  8. js 动态生成背景图 GeoPattern

    以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...

  9. Node JS爬虫: 阮老师网站背景图

    小白,轻喷,本文教你三分钟入门爬虫 前言 有一天发现,阮一峰老师的博客图片很好看,想收藏一下,因为几百张,一张张下载太慢,朋友推荐了个谷歌插件(Fatkun)确实挺好用的,这之后就对爬虫有了兴趣,这个 ...

随机推荐

  1. 教你如何搭建vue项目

    笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目 我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...

  2. [Android] Android工程以jar包形式向第三方应用提供服务

    参考: http://www.cnblogs.com/0616--ataozhijia/p/4094952.html 以API 19为例: 系统默认提供的 android.jar整体大小为: 21.8 ...

  3. [HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components

    HTMLTemplates are part of the web components specification. In this lesson we will learn what are HT ...

  4. Boost.Asio c++ 网络编程翻译(21)

    同步VS异步 Boost.Asio的作者做了一个非常惊艳的工作:它能够让你在同步和异步中自由选择,从而更好的适应你的应用. 在之前的章节中,我们学习了每种类型应用的框架,比方同步client,同步服务 ...

  5. Android异步载入全解析之大图处理

    Android异步载入全解析之大图处理 异步载入中很重要的一部分就是对图像的处理,这也是我们前面用异步载入图像做示例的原因. 一方面是由于图像处理不好的话会很占内存,并且easyOOM,还有一方面,图 ...

  6. C#时间的味道——任时光匆匆我只在乎你

    如果没有遇见你,我将会是在哪里?日子过的怎么样人生是否要珍惜...任时光匆匆我只在乎你,心甘情愿感染你的气息,人生几何能得到知己...一首邓丽君的<我只在乎你>不禁令我唏嘘不已,这些年离我 ...

  7. iOS开发必备指南合集之游戏接入GameCenter 指南

    原地址:http://bbs.9ria.com/thread-248408-1-1.html iTunes Connect 设置 首先,申请一个应用程序,不必提交.目地是为了得到Bundle ID.  ...

  8. 优秀运维人员20道必会iptables面试题(转载)

    (一)企业面试口试题 1.详述iptales工作流程以及规则过滤顺序? 2.iptables有几个表以及每个表有几个链? 3.iptables的几个表以及每个表对应链的作用,对应企业应用场景? 4.画 ...

  9. (一)Lucene——基本概念介绍

    1. Lucene是什么 Lucene 是一个基于 Java 的全文信息检索工具包,它不是一个完整的搜索应用程序,而是为你的应用程序提供索引和搜索功能.Lucene 目前是 Apache Jakart ...

  10. HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)

    1.手机浏览器与桌面浏览器的不同 现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多.一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小 ...