图片逐个切换，如【走光效果】，【gif逐帧动画】

转载

mob604756f52321 2015-08-14 10:45:00

文章标签 js函数 i++ ide 封装 html 文章分类 MySQL 数据库

<style>
    .face{
        width:189px;
        height: 329px;
        overflow: hidden;
    }
    .face img{
        display:none;
    }
 </style>

html:

<div class="face"> 
      <img src="images/face/face-1.png"/>
      <img src="images/face/face-2.png"/>
      <img src="images/face/face-3.png"/>
      <img src="images/face/face-4.png"/>
      <img src="images/face/face-5.png"/>
      <img src="images/face/face-6.png"/>
      <img src="images/face/face-7.png"/>
      <img src="images/face/face-8.png"/>
</div>

js函数封装：

function imgShow(ele){
    var i=-1;
    var len=ele.children("img").length;
        function imgAnimate(){   //设置动画
            i++;
            if(i<len){  
                setTimeout(function(){
                    ele.children("img").eq(i).show().siblings().hide();
                    imgAnimate(); //内部回调
                },200);   //间隔时间
            }else{
　　　　　　　　　　//动画执行一次完成后
　　　　　　　}
        }
        imgAnimate();  //执行一次动画,否则其他动画不隐藏
}

 imgShow($(".face_gif"));  //执行一次
 setInterval(function(){imgShow($(".face"))},1000);  //循环执行