-1

我有一个旋转木马,你可以在这里找到: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()

        } )*/

    }   

} );
4

1 回答 1

1

我可以想到两种方法:

1

在旋转木马上有一个透明<div>的,并消耗它上面的所有鼠标事件,所以旋转木马什么都没有。

您可以使用绝对定位将 div 放置到位,并click使用event.stopPropagation().

2

使用 手动取消绑定轮播事件jQuery.off。它可以是swipeleftand swiperight,或者只是mousedown等等。


选项1似乎不那么艰巨。

于 2013-08-03T10:24:53.750 回答