js 定时更改div背景图片

Posted 2021-01-15 御行所

今天遇到一个业务场景，使用js将一个div标签的背景图片定时更换一下。

之前百度了几个，有css+js，也有css3的，不过css3的兼容有问题，之后同事提示，可以使用js直接来更换div的北京图片，不使用css+ul+il的形式。

推荐的阅读https://blog.csdn.net/woyizhidouzai0505/article/details/41176565?utm_source=blogxgwz1

这个博客写的很好，用的也是这个方法。

下面写两种情况：

第一种是先规定几张图片，随机选中其中一个显示

   /*  <img id="div_first" src=‘./image/first1.jpg‘ style="width:1348px;height:657px; "/>    */  // 下面getElementById部分为想要更改的那部分的id属性,我的是这么写的

js代码：

1 var imgs =["first1.jpg", "first2.jpg", "first3.jpg"];//（设定想要显示的图片）
2 function time(){
3     var i = Math.floor(Math.random()*(3+0)+0); //（获取随机数，设置m~n的随机，此处3是代表n，0处是m，可以替换）
4     document.getElementById("div_first").src ="./image/"+imgs[i];  //红色部分是自定义的图片文件夹目录             
5 }
6 setInterval("time()",3000);           //设定为3秒，可更换

 

第二种是规定图片，并按照顺序循环显示

js代码：

1 var imgs =["first1.jpg", "first2.jpg", "first3.jpg"];    //（设定想要显示的图片）
2 var x = 0;        
3 function time1(){
4     x++;    
5     x=x%3;         //         超过2则取余数，保证循环在0、1、2之间
6     document.getElementById("div_first").src ="./image/"+imgs[x];
7 }
8 setInterval("time1()",3000);//方法和时间

不过这个是更新img的图片，不是div的。

div的北京图片的更改稍微复杂一点，如下     

1 var obj = document.getElementById("d1");//获得id名为d1的对象
2 obj.style.backgroundImage= "URL("+路径+")";       //显示对应的图片

使用的是https://blog.csdn.net/qq_34129336/article/details/77581410的方法，这个博客也有一个js更换图片的方法，也可以看看。