这个是要求一直滑动中间元素图片,形成一个可以上下滚动的状态 ,现在是将中间元素滑动上去以后,取消不了之前的事件,再滑动之前那个元素时还可以滑动,求大神帮忙解决下
function swipeShow() {
// 给class为slide_sub加上触滑监听事件
//事件,方向,距离(像素为单位),时间,手指数量
$("#slider .slide_sub:eq(1)").swipe({
swipeUp:function (event, direction, distance, duration, fingerCount) {
// event.stopPropagation();//阻止冒泡
// event.preventDefault();//阻止浏览器默认事件
var index = $(this).index();
$(".cenTitle").fadeOut(300);
var prevIndex = index - 1;
var nextIndex = index + 1;
// get prev element
var pe = $("#slider .slide_sub:eq(" + prevIndex + ")");
var pw = pe.width();
var ph = pe.height();
var pmt = pe.position().top;
var pl = pe.position().left;
// 概率圆样式
var pp = pe.find('.probability');
var ppw = pp.width();
var pph = pp.height();
var ppmt = pp.css('bottom');
var ppl = pp.css('right');
var pf = pp.css('font-size');
// 概率数字样式
var ps = pe.find('.probability span');
var psb = ps.css('bottom');
var psl = ps.position().left;
// get next element
var ne = $("#slider .slide_sub:eq(" + nextIndex + ")");
var nw = ne.width();
var nh = ne.height();
var nmt = ne.position().top;
var nl = ne.position().left;
var np = ne.find('.probability');
var npw = np.width();
var nph = np.height();
var npmt = np.css('bottom');
var npl = np.css('right');
var nf = np.css('font-size');
var ns = ne.find('.probability span');
var nsb = ns.css('bottom');
var nsl = ns.position().left;
// get obj element
var ow = $(this).width();
var oh = $(this).height();
var omt = $(this).position().top;
var ol = $(this).position().left;
var oZindex = parseInt($(this).css("z-index"));
var op = $(this).find('.probability');
var opw = op.width();
var oph = op.height();
var opmt = op.css('bottom');
var opl = op.css('right');
var of = op.css('font-size');
var os = $(this).find('.probability span');
var osb = os.css('bottom');
var osl = os.position().left;
$(this).animate({
width: pw,
height: ph,
top: pmt,
left: pl,
zIndex: oZindex - 1
}, 300);
op.animate({
width: ppw,
height: pph,
bottom: ppmt,
right: ppl,
fontSize: pf,
}, 300)
os.animate({
bottom: psb,
left: psl,
}, 300)
ne.css({"z-index": oZindex});
ne.animate({
width: ow,
height: oh,
top: omt,
left: ol
}, 300, function () {
$('.cenTitle').fadeIn()
});
np.animate({
width: opw,
height: oph,
bottom: opmt,
right: opl,
fontSize: of,
}, 300)
ns.animate({
bottom: osb,
left: osl,
}, 300)
pe.css({"z-index": oZindex-1});
pe.animate({
width: nw,
height: nh,
top: nmt,
left: nl
}, 300, function () {
$('.cenTitle').fadeIn()
});
pp.animate({
width: npw,
height: nph,
bottom:npmt,
right: npl,
fontSize: nf,
}, 300);
ps.animate({
bottom: nsb,
left: nsl,
}, 300);
var pobj = $(this).parent();
pobj.prepend($(this));// 将当前元素追加到父元素的顶部、
pobj.append(pe);// 上一个元素追加到父元素的尾部
// pobj.children().unbind("swipeUp");
// pobj.children().unbind("swipeDown");
pobj.children().unbind('swipe');
console.log($(this).index()+'b');
swipeShow();
},
swipeDown:function (event, direction, distance, duration, fingerCount) {
// event.stopPropagation();//阻止冒泡
// event.preventDefault();//阻止浏览器默认事件
var index = $(this).index();
$(".cenTitle").fadeOut(300);
var prevIndex = index - 1;
var nextIndex = index + 1;
// get prev element
var pe = $("#slider .slide_sub:eq(" + prevIndex + ")");
var pw = pe.width();
var ph = pe.height();
var pmt = pe.position().top;
var pl = pe.position().left;
// 概率圆样式
var pp = pe.find('.probability');
var ppw = pp.width();
var pph = pp.height();
var ppmt = pp.css('bottom');
var ppl = pp.css('right');
var pf = pp.css('font-size');
// 概率数字样式
var ps = pe.find('.probability span');
var psb = ps.css('bottom');
var psl = ps.position().left;
// get next element
var ne = $("#slider .slide_sub:eq(" + nextIndex + ")");
var nw = ne.width();
var nh = ne.height();
var nmt = ne.position().top;
var nl = ne.position().left;
var np = ne.find('.probability');
var npw = np.width();
var nph = np.height();
var npmt = np.css('bottom');
var npl = np.css('right');
var nf = np.css('font-size');
var ns = ne.find('.probability span');
var nsb = ns.css('bottom');
var nsl = ns.position().left;
// get obj element
var ow = $(this).width();
var oh = $(this).height();
var omt = $(this).position().top;
var ol = $(this).position().left;
var oZindex = parseInt($(this).css("z-index"));
var op = $(this).find('.probability');
var opw = op.width();
var oph = op.height();
var opmt = op.css('bottom');
var opl = op.css('right');
var of = op.css('font-size');
var os = $(this).find('.probability span');
var osb = os.css('bottom');
var osl = os.position().left;
var pobj = $(this).parent();
$(this).animate({
width: nw,
height: nh,
top: nmt,
left: nl,
zIndex: oZindex - 1
},300);
op.animate({
width: npw,
height: nph,
bottom: npmt,
right: npl,
fontSize: nf,
}, 300)
os.animate({
bottom: nsb,
left: nsl,
}, 300)
ne.css({"z-index": oZindex - 1});
ne.animate({
width: pw,
height: ph,
top: pmt,
left: pl
}, 300, function () {
$('.cenTitle').fadeIn()
});
np.animate({
width: ppw,
height: pph,
bottom: ppmt,
right: ppl,
fontSize: pf,
}, 300)
ns.animate({
bottom: psb,
left: psl,
}, 300)
pe.css({"z-index": oZindex});
pe.animate({
width: ow,
height: oh,
top: omt,
left: ol
}, 300, function () {
$('.cenTitle').fadeIn()
});
pp.animate({
width: opw,
height: oph,
bottom: opmt,
right: opl,
fontSize: of,
}, 300);
ps.animate({
bottom: osb,
left: osl,
}, 300);
// 下一个元素追加到父元素的顶部
pobj.prepend(ne);
// 将当前元素追加到父元素的尾部
pobj.append($(this));
// pobj.children().unbind("swipeDown");
// pobj.children().unbind("swipeUp");
pobj.children().unbind('swipe');
console.log($(this).index()+'a');
swipeShow();
},
});
}