微信动画IMGjQuery形式<移动端 二>

<div class="model">
        <div class="animate">
            <img src="../images/1.png" alt=""/>
        </div>
        <p class="loginTe">累计泰享值<span id="txzS" class="txzS"></span></p>
        </div>

css

/*模态框 显示登录泰享值增加分数和原因*/
.model{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 10;
    /*display: block;*/
    /* display: none; */
}
.animate{
    width: 100%;
}
.loginTe{
    width: 100%;
    font-size: 0.9375rem;
    color: #ffffff;
    font-weight: bold;
    position: absolute;
    top:20.375rem;
    text-align: center;
    opacity: 0.29;
    display: none;
}
.txzS{
    color:#fde307;
}

 

通过改变img 的src 来制定动画，通过判断来添加中途其他动画

 

js

/*首页动画*/
$(function(){
    txzAnimate();
})
function txzAnimate(){
        for(var j=2;j<22;j++){
            var img=new Image();
            img.src="images/" + j + ".png"
            img.onload=function(){
               // console.log(j+"图片被加载完成");
            }
        }
        function animate(){
            var $loginTe= $(".loginTe");
            var $model= $(".model");
            console.log("进去动画");
            $(".model").css("display","block");
            var i=2;
            var ani1=setInterval(function(){
                if(i<22){
                    if(i<=7){
                       $(".animate>img").attr("src", "images/" + i + ".png");
                    }else if(i==8){
                        $loginTe.css("display","block");
                        $(".animate>img").attr("src", "images/" + i + ".png");
                    }else if(i==9){
                        $loginTe.css({
                            top:"19.28125rem",
                            opacity:"0.69"
                        });
                        $(".animate>img").attr("src", "images/" + i + ".png");
                    }else if(i==10){
                        $loginTe.css({
                            top:"18.1875rem",
                            opacity:"1"
                        })
                        $(".animate>img").attr("src", "images/" + i + ".png");
                    }else if(10<i<20){
                        $(".animate>img").attr("src", "images/" + i + ".png");
                    }else if(i==20){
                        $loginTe.css({
                            opacity:"0.5"
                        })
                        $(".animate>img").attr("src", "images/" + i + ".png");
                    }else if(i==21){
                        $loginTe.css("display","none");
                        $(".animate>img").attr("src", "images/" + i + ".png");
                    }
                }else{
                    //console.log(1111);
                    clearInterval(ani1);
                    $(".animate>img,.loginTe").fadeOut("slow",function(){
                        $(".model").fadeOut("slow");
                    });
                    //activeLoad();
                }
                i++;
            },500)
        }
        var ani2=setTimeout(animate,1000);

};