//觸屏左右滑動事件 通過 vmousedown、vmousemove 模擬滑動
$(".pic-content").live("vmousedown",function(event){
event.preventDefault();//阻止其他事件,手機默認會觸發其他事件
movex = 0;
var x = event.pageX;
// 圖片拖動動作
$(".pic-content").live("vmousemove",function(event){
var y = event.pageX;
movex = y - x;
var tran_move = "scale(1) translate3d("+(movex-winwidth)+"px,0px,0px)";
$(".pic-content").css({"transform":tran_move,"transition-duration":"0ms"});
});
});
//結束滑動響應函數
$(".pic-content").live("vmouseup",function(){
//解除滑動事件
$(".pic-content").unbind("vmousemove");
//根據滑動距離判斷操作
if(movex>60){
if(now_id==0){
$(".pic-content").css({"transform":tran,"transition-duration":"200ms"});
}else{
$(".pic-content").css({"transform":"scale(1) translate3d(0px,0px,0px)","transition-duration":"200ms"});
now_id--;
moveover_r(now_id);
}
}else if(movex<(-60)){
if(now_id==(img_info.length-1)){
$(".pic-content").css({"transform":tran,"transition-duration":"200ms"});
}else{
$(".pic-content").css({"transform":tran_2,"transition-duration":"200ms"});
now_id++;
moveover_l(now_id);
}
}
//滑動距離小於60px 則回覆原位
else{
$(".pic-content").css({"transform":tran,"transition-duration":"200ms"});
}
});
//根據滑動距離更改頁面內容,偏移值復位 由於load事件只想用於新增的img ,否則造成當前幻燈片手機閃屏 。所以採用刪除並新增的方式,否則可以直接html()
function moveover_l(now_id){
html = "<li style='width:"+winwidth+"px;line-height:"+winheight+"px'><img src='"+(img_info[now_id+1]?img_info[now_id+1]['path']:no_pic)+"'></li>";
setTimeout(function(){
$(".pic-content li").first().remove();
$(".pic-content").append(html);
$("img").load(function(){
$(this).css("opacity","1");
});
$(".pic-content").css({"transform":tran,"transition-duration":"0s"});
$(".pic-foot p").html(img_info[now_id]?img_info[now_id]['name']:null);
$(".pic-top span").text((now_id+1)+"/"+img_info.length);
//$("#mydownload").attr("href",img_info[now_id]['path']);
},200);
};
<pre name="code" class="html">function moveover_r(now_id){
html = "<li style='width:"+winwidth+"px;line-height:"+winheight+"px'><img src='"+(img_info[now_id-1]?img_info[now_id-1]['path']:no_pic)+"'></li>";
setTimeout(function(){
$(".pic-content li").last().remove();
$(".pic-content").prepend(html);
$("img").load(function(){
$(this).css("opacity","1");
});
$(".pic-content").css({"transform":tran,"transition-duration":"0s"});
$(".pic-foot p").html(img_info[now_id]?img_info[now_id]['name']:null);
$(".pic-top span").text((now_id+1)+"/"+img_info.length);
//$("#mydownload").attr("href",img_info[now_id]['path']);
},200);
};