layer相册层手机端切换图片解决方案
手机网站需要点击图片预览，相关插件很多，但是都是绑定元素的，还有页面用了VUE，这样就不好用了，刚好layer的相册层很不错，就直接要用了这个，但是问题来了，手机端无法切换 图片，原因在于layer相册层使用的:hover控制切换按钮显示，手机端:hover行不通，所以无法切换，然后打算换插件，找了好多不满意，就想办法让layer支持手机切换，思路如下： layer弹出本质是html,当弹出层完成时会触发success回调，此时就可以查找dome来操作，模拟滑动事件来模拟触发下一页上一页的点击事件达到切换
代码如下：
//定义一个函数绑定事件
function _self() {
if(!is_Pc()){
$('#layui-layer-photos .layui-layer-imgbar').css('display','block');
}
var image = $("#layui-layer-photos").parent();//顶级元素ID会变，但是二层元素是固定ID，所以可以精确获取二层元素，从而精确获取顶级（非遮罩），
var startX, startY,endX, endY;//开始时的坐标xy 结束时的xy
//触摸开始触发事件
$(image).on("touchstart", function (e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX;//触摸开始时的x坐标
startY = e.originalEvent.changedTouches[0].pageY;//触摸开始时的Y坐标
});
//滑动过程触发的事件
$(image).on("touchmove", function (e) {
e.preventDefault();
endX = e.originalEvent.changedTouches[0].pageX-startX;//此时滑动中的X坐标
endY = e.originalEvent.changedTouches[0].pageY-startY;//滑动中的Y坐标
});
//滑动结束触发的事件
$(image).on('touchend', function (e) {
e.preventDefault();
//对比X值的正负来判断滑动方向，上下滑则判断Y
if (endX > 0) {
//上一个
$(image).find('.layui-layer-imgprev').trigger('click');//找到弹出DENO下的上一个按钮，模拟触发点击事件
} else if (endY < 0) {
//下一个
$(image).find('.layui-layer-imgnext').trigger('click');//找到弹出DENO下的下一个按钮，模拟触发点击事件
}
});
}
// start 图片遮罩
var layerphotos = document.getElementsByClassName('layer-photos-demo');
for(var i = 1;i <= layerphotos.length;i++){
layer.photos({
photos: ".layer-photos-demo"+i+""
,anim: 0
, success: function (image) {//弹出层加载完毕，开始绑定事件
_self();
}
, tab: function (image) {//切换相片触发后会销毁原来的dome 需要从新绑定
_self();
}
});
}