js 定时更改div背景图片

今天遇到一个业务场景，使用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代码：

 var imgs =["first1.jpg", "first2.jpg", "first3.jpg"];//（设定想要显示的图片）

 function time(){

     var i = Math.floor(Math.random()*(3+0)+0); //（获取随机数，设置m~n的随机，此处3是代表n，0处是m，可以替换）

     document.getElementById("div_first").src ="./image/"+imgs[i];  //红色部分是自定义的图片文件夹目录

 }

 setInterval("time()",3000);           //设定为3秒，可更换

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

js代码：

 var imgs =["first1.jpg", "first2.jpg", "first3.jpg"];    //（设定想要显示的图片）

 var x = 0;

 function time1(){

     x++;

     x=x%3;         //         超过2则取余数，保证循环在0、1、2之间

     document.getElementById("div_first").src ="./image/"+imgs[x];

 }

 setInterval("time1()",3000);//方法和时间

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

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

 var obj = document.getElementById("d1");//获得id名为d1的对象

 obj.style.backgroundImage= "URL("+路径+")";       //显示对应的图片

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

秒客网

js 定时更改div背景图片

相关文章