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开始。

时间: 2024-10-29 20:52:23

JS实现背景图按时切换或者每次更新的相关文章

JS编写背景图切换

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>背景图切换</title>    <style type="text/css">    #wrap{        width: 300px;height: 225px;        margin: 100px au

一个动态小导航栏(好看的,用C3)(不依赖js,点击小图切换大的背景图)

<!DOCTYPE HTML><htmllang="en-US">    <head>        <meta charset="UTF-8">     <title>CSS3 Full Background Slider </title>        <style type="text/css">            @importurl("ht

js 动态生成背景图 GeoPattern

以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> <head> <title>js 生成随机背景图</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></s

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

在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig.h 将 #define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 0  改为 #define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 1  第二种: 在AppDelegate::initInstance()方法的最后调用CCDirect

一款JS感应鼠标横向左右切换的焦点图切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和图片的尺寸位置 开始时canvas是隐藏的,两张背景图时显示的,当canvas画完后再转为img的时候,隐藏canvas和背景图,显示canvas转完的图片(也就是合并后的图片) 这个适配方式可能有些瑕疵,所以会加了很多设备的判断 代码: html      <div class="wap-p

js实现刷新页面出现随机背景图

直接上代码:<script> var bodyBgs = []; bodyBgs[0] = "IMG/01.jpg"; bodyBgs[1] = "IMG/02.jpg"; bodyBgs[2] = "IMG/03.jpg"; bodyBgs[3] = "IMG/04.jpg"; bodyBgs[4] = "IMG/05.jpg"; var randomBgIndex = Math.round(

清除css、javascript及背景图在浏览器中的缓存

在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的下载次数,获得更好的用户体验. 然而在版本升级或做一些css.js等调整的时候,缓存导致用户无法显示更新后的样式,这是另人头头疼的问题.除非用户自行手动升级缓存,不过几乎所有用户不会为了正常访问这个网站而去手动清除缓存,因为用户根本不知道是不是缓存的问题,而归根结底,用户就是认为你的页面存在问题,不

如何使用JS实现banner图滚动

通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数,为定时器函数,函数内通过switch结构执行,case的值通过声明一个全局变量每次执行函数的时候使其自加,通过执行函数的次数来确定banner图向左移动多少的距离.需注意第5次要使全局变量归零才能使定时器内的switch结构无限循环,在样式表中可以设置过渡效果,使滚动更有节奏感 接下来实现banne