天天看点

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 = ;
    oPic.timer = null;
    oPic.img = null;
    var imgsrc = null;
    
    //根据图片数组下标循环切换图片
    function changeImage1() {
        if(oPic.curPic < oPic.imgs.length-){
            oPic.curPic++;
        }else{
            oPic.curPic = ;    
        }
        imgsrc = "assets/images/"+oPic.imgs[oPic.curPic];
        $("divId").style.backgroundImage="url("+imgsrc+")";
        oPic.timer=window.setTimeout(changeImage2,);
    }
    
    function changeImage2() {
        if(oPic.curPic < oPic.imgs.length-){
            oPic.curPic++;
        }else{
            oPic.curPic = ;    
        }
        imgsrc = "assets/images/"+oPic.imgs[oPic.curPic];
        $("divId").style.backgroundImage="url("+imgsrc+")";
        oPic.timer=window.setTimeout(changeImage1,);
    }
    
    
    function init() {
        //为标签指定初始图片地址
        imgsrc = "/assets/images/"+oPic.imgs[oPic.curPic];
        $("divId").style.backgroundImage="url("+imgsrc+")";
        oPic.timer=window.setTimeout(changeImage1,);
    }
    //在加载时初始化,没有的化不显示内容
    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>
               

继续阅读