为什么我的左划右划只能执行一次？左划执行第二次屏幕会动？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0">
<title>MyPhoto</title>
<link rel="stylesheet" href="./animate.min.css" type="text/css">
<script src="zepto.min.js"></script>
<style type="text/css">
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,img{
margin: 0;
padding: 0;
}
body{background:black;overflow:hidden}
ul{list-style:none}
li{float: left;width:100px;height: 100px;overflow: hidden;}
.large{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;background-color: black;}
</style>
</head>
<body>
<ul id="container">
</ul>
<div class="large animated fadeIn" id="large-container" style="display:none;">
<img id="large_img">
</div>
<script>
var total = 17; //手机图片数量
var zWin = $(window); //获取window对象
var render = function(){
var tmpl =''; //变量声明
var padding = 2; //设置默认padding值
var winWidth = zWin.width(); //获取设备的宽度
var picWidth = Math.floor(winWidth-padding*3)/4; //计算每张图片的宽度
for(var i=1;i<=total;i++){
var p = padding; //赋值2
var imgSrc = 'img/'+i+'.jpg';
if (i%4==1) {
p==0; // 判断第一张图片padding为0
};
//添加li标签
tmpl +='<li data-id="'+i+'" class="animated bounceIn" style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';
var imgObj = new Image();
imgObj.index = i;
imgObj.onload = function(){
//相当于document.getElementById('cvs_"+i+"');
var cvs = $('#cvs_'+this.index)[0].getContext('2d');
cvs.width = this.width; // this 指 imgObj
cvs.height = this.height;
cvs.drawImage(this,0,0);
}
imgObj.src = imgSrc;
}
//打印标签
$('#container').html(tmpl);
}
render(); //调用render方法
var wImg = $('#large_img');
var loadImg = function(id,callback){
$('#large-container').css({width:zWin.width(),height:zWin.height()}).show();
var imgSrc = 'img/'+id+'.large.jpg';
var imageObj = new Image();
imageObj.onload = function(){
var w = this.width;
var h = this.height;
var winWidth = zWin.width();
var winHeight = zWin.height();
var realw = winHeight*w/h;
var realh = winWidth*h/w;
var paddingLeft = parseInt((winWidth - realw)/2);
var paddingTop = parseInt((winHeight - realh)/2);
wImg.css('width','auto').css('height','auto');
wImg.css('padding-left','0px').css('padding-top','0px');
if(h/w >1.2){ //当高大于宽时
//让宽布满屏幕
wImg.attr('src',imgSrc).css('height',winHeight).css('padding-left',paddingLeft);
}else{
wImg.attr('src',imgSrc).css('width',winWidth).css('padding-top',paddingTop);
}
callback&&callback();
}
imageObj.src = imgSrc;
}
$('#container').delegate('li','tap',function(){
//获取li标签中的自创属性data-id 。
var _id = cid = $(this).attr('data-id');
loadImg(_id);
});
$('#large-container').tap(function(){
$(this).hide();
}).swipeLeft(function(){
cid++;
if(cid>total){
cid = total;
}else{
loadImg(cid,function(){
wImg.addClass('animated bounceInRight');
});
}
}).swipeRight(function(){
cid--;
if (cid<1) {
cid = 1;
}else{
loadImg(cid,function(){
wImg.addClass('animated bounceInLeft');
})
}
});
</script>
</body>
</html>
