博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS实现背景图按时切换或者每次更新
阅读量:5082 次
发布时间:2019-06-13

本文共 1437 字,大约阅读时间需要 4 分钟。

首先要有一个添加背景图片的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开始。

转载于:https://www.cnblogs.com/jinhengyu/p/10258039.html

你可能感兴趣的文章
Lambad表达式树(转)
查看>>
15 SharePreference
查看>>
24点
查看>>
各种米的营养价值
查看>>
php 处理数字为金钱格式
查看>>
学习51单片机——秒表分享
查看>>
我画你猜(微信版--游戏说明)
查看>>
cssText的用法以及特点 转载至http://www.cnblogs.com/majingyi/p/6840818.html
查看>>
7款纯CSS3实现的炫酷动画应用
查看>>
sed结构分析 + awk结构分析
查看>>
MySQL安装+更换yum源+mysql密码忘记(2019更新)
查看>>
解决ubuntu10插入耳机还有外音的问题
查看>>
自用win10软件
查看>>
Hive异常- requestedMemory=1536, maxMemory=1024
查看>>
python 选择排序
查看>>
【转】 ubuntu12.04更新源 官网和163等
查看>>
java过滤器
查看>>
JS给对象添加新字段
查看>>
maven项目对于测试时“无法加载主类”的解决方案
查看>>
Python文件读写
查看>>