JS实现背景图按时切换或者每次更新

Posted 2020-10-08 博客已搬家：jimmy.blog.csdn.net

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