js动态改变VID图片背景图片

js动态改变VID图片背景图片

1. js代码如下

   function $(id) {
       return document.getElementById(id);
   }
   
   //创建一个对象
   var oPic = {};
   //存放图片的数组
   oPic.imgs = 
   ["01-1.jpg","01.jpg","02-1.jpg","02.jpg","03-1.jpg","03.jpg",
               "04-1.jpg","04.jpg","05-1.jpg","05.jpg","06-1.jpg","06.jpg",
               "07-1.jpg","07.jpg","08-1.jpg","08.jpg","09-1.jpg","09.jpg",
               "10-1.jpg","10.jpg","11-1.jpg","11.jpg","12-1.jpg","12.jpg"];
   oPic.curPic = 0;
   oPic.timer = null;
   oPic.img = null;
   var imgsrc = null;
   
   //根据图片数组下标循环切换图片
   function changeImage1() {
       if(oPic.curPic < oPic.imgs.length-1){
           oPic.curPic++;
       }else{
           oPic.curPic = 0;    
       }
       imgsrc = "assets/images/"+oPic.imgs[oPic.curPic];
       $("divId").style.backgroundImage="url("+imgsrc+")";
       oPic.timer=window.setTimeout(changeImage2,3000);
   }
   
   function changeImage2() {
       if(oPic.curPic < oPic.imgs.length-1){
           oPic.curPic++;
       }else{
           oPic.curPic = 0;    
       }
       imgsrc = "assets/images/"+oPic.imgs[oPic.curPic];
       $("divId").style.backgroundImage="url("+imgsrc+")";
       oPic.timer=window.setTimeout(changeImage1,300);
   }
   
   
   function init() {
       //为标签指定初始图片地址
       imgsrc = "/assets/images/"+oPic.imgs[oPic.curPic];
       $("divId").style.backgroundImage="url("+imgsrc+")";
       oPic.timer=window.setTimeout(changeImage1,1000);
   }
   //在加载时初始化，没有的化不显示内容
   window.onload=init;

2. HTML代码

   <div id="divId" class="div_conter" style="background-size:100% 100%"></div>
   .....
   <script language="JavaScript" src="/assets/js/my_js/changePic.js"></script>