我有一个旋转木马,你可以在这里找到:http://hutchcreative.co.uk/rod/。在移动设备上,它允许用户轻扫旋转木马上的图像,而无需单击旋转木马控件。我想删除此功能,因此强制用户使用轮播控件。
这是我的jquery:
jQuery( document ).ready( function( $ ) {
var wind = $( window ),
html = $( "html" ),
touch = html.hasClass( "touch" ),
ie8 = html.hasClass( "ie8" ),
ie = html.hasClass( "ie" ),
picks = $( "#picks" ),
li = picks.find( "li" ),
skip = picks.find( ".skip" ),
hold = true,
interval
li
.eq( 0 )
.addClass( "current" )
ph_picks_autocolor()
li
.imagesLoaded()
.progress( function( e, i ) {
if ( ie8 )
return
$( i.img )
.parents( "li" )
.css( "background-image", "url(" + i.img.src + ")" )
} )
.always( function() {
picks.addClass( "ready" )
ph_picks_release()
} )
function ph_picks( side ) {
if ( hold )
return
hold = true,
current = li.filter( ".current" )
if ( side == "next" ) {
next = current.next( "li" ).length ? current.next( "li" ) : li.eq( 0 )
}
else {
next = current.prev( "li" ).length ? current.prev( "li" ) : li.filter( ":last" )
}
current.removeClass( "current" )
next.addClass( "current" )
ph_picks_autocolor( next )
ph_picks_release()
}
function ph_picks_auto() {
if ( interval )
clearInterval( interval )
interval = setInterval( function() {
ph_picks( "next" )
}, 10000 )
}
function ph_picks_release() {
if ( ie ) {
hold = false
ph_picks_auto()
}
else {
setTimeout( function() {
hold = false
ph_picks_auto()
}, 800 )
}
}
function ph_picks_autocolor( current ) {
current = current ? current : li.filter( ".current" )
skip.css( "border-color", current.children( "article" ).css( "color" ) )
}
wind.on( "keydown", function( e ) {
if ( e.keyCode == 39 || e.keyCode == 37 ) {
ph_picks( e.keyCode == 39 ? "next" : "prev" )
e.preventDefault()
}
} )
if ( ! touch ) {
skip
.on( "click", function( e ) {
ph_picks( "next" )
e.preventDefault()
} )
skipLeft = picks.find("#skipLeft"),
skipRight = picks.find("#skipRight")
skipLeft
.hammer()
.on( "tap", function( e ) {
ph_picks( "prev" )
e.gesture.preventDefault()
} )
skipRight
.hammer()
.on( "tap", function( e ) {
ph_picks( "next" )
e.gesture.preventDefault()
} )
}
else {
picks
.hammer()
.on( "dragstart", function( e ) {
e.gesture.preventDefault()
} )
.on( "dragend", function( e ) {
var i = e.gesture
if ( i.distance < 40 )
return
if ( i.direction == "left" ) {
ph_picks( "next" )
}
else if ( i.direction == "right" ) {
ph_picks( "prev" )
}
} )
skipLeft = picks.find("#skipLeft"),
skipRight = picks.find("#skipRight")
skipLeft
.hammer()
.on( "tap", function( e ) {
ph_picks( "prev" )
e.gesture.preventDefault()
} )
skipRight
.hammer()
.on( "tap", function( e ) {
ph_picks( "next" )
e.gesture.preventDefault()
} )
/*skip
.hammer()
.on( "tap", function( e ) {
ph_picks( "next" )
e.gesture.preventDefault()
} )*/
}
} );
答案 0 :(得分:1)
我可以想到两种方式:
<强> 1 强>
在旋转木马上有一个透明的<div>
,并在其上消耗所有鼠标事件,因此旋转木马什么都没有。
您可以使用绝对定位来获取div,并将click
与event.stopPropagation()
绑定。
<强> 2 强>
使用jQuery.off
手动取消绑定轮播事件。它可以是swipeleft
和swiperight
,也可以是mousedown
等。
选项 1 似乎不那么艰难。