Question

如果您转到此链接：http://hutchcreative.co.uk/rod/，您可以看到轮播的实时版本。

我在屏幕的每一侧都设置了左右绿色按钮。但是我希望左边一个循环到上一张/上一张幻灯片而不是下一张幻灯片。我不知道如何编辑jquery来实现这一点。

这是整个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()

    } )

}
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()

    } )*/

}

}）;

这是我的HTML

<div id="picks" class="fit">

    <?php if ( count( $i ) > 1 ) : ?>

    <!-- next -->
    <span id="skipLeft" class="skip"></span>
    <span id="skipRight" class="skip"></span>

    <?php endif; ?>

    <!-- items list -->
    <ul>

        <?php foreach ( $i as $item ) : ?>

        <!-- item -->
        <li id="<?php esc_attr_e( $item->id ); ?>">

            <?php if ( $item->title || $item->caption || $item->link->url ) : ?>

            <!-- info -->
            <article <?php if ( $item->alignment ) echo 'class="' . esc_attr( $item->alignment ) . '"'; ?> <?php if ( $item->color ) echo 'style="color: ' . esc_attr( $item->color ) . ';"'; ?>>

                <!-- title -->
                <h2 class="cover-title"><?php echo $item->title; ?></h2>


                <?php if ( $item->title || $item->caption ) : ?>



                <?php endif; ?>

                <!-- excerpt -->
                <span>

                    <p class="caption"><?php echo do_shortcode( $item->caption ); ?></p>

                    <?php if ( $item->link->url ) : ?>

                    <a href="<?php echo esc_url( $item->link->url ); ?>" class="action"><?php echo ( $i = $item->link->label ) ? $i : __( 'Explore Set', 'openframe' ); ?></a>

                    <?php endif; ?>

                </span>
                <!-- end: excerpt -->

            </article>
            <!-- info -->

            <?php endif; ?>

            <!-- image -->
            <img src="<?php RodTheme_get_media_url( $item->media, 'full' ); ?>" alt="<?php esc_attr_e( $item->id ); ?>" />

        </li>
        <!-- end: item -->

        <?php endforeach; ?>

    </ul>
    <!-- end: items list -->

    <!-- loading -->
    <span class="wait"><?php _e( 'Loading..', 'openframe' ); ?></span>

</div>

谢谢！

Answer 1

您将skip定义为

skip = picks.find（“。skip”），

选择两个按钮

   <span id="skipLeft" class="skip"></span>
   <span id="skipRight" class="skip"></span>

然后你的处理程序，做下一个

  skip
    .hammer()
    .on( "tap", function( e ) {

        ph_picks( "next" )

        e.gesture.preventDefault()

    } )

因此为skipLeft添加一个var，为skipRight添加一个

skipLeft = picks.find("#skipLeft"),
 skipRight = picks.find("#skipRight")

然后为每个

添加一个处理程序

skipLeft
    .hammer()
    .on( "tap", function( e ) {

        ph_picks( "pref" )

        e.gesture.preventDefault()

    } )
skipRight
    .hammer()
    .on( "tap", function( e ) {

        ph_picks( "next" )

        e.gesture.preventDefault()

    } )

我错过了nontouch代码。它还需要修改以处理skipLeft和skipRight而不是跳过

if ( ! touch ) {

        skip.on( "click", function( e ) {

            ph_picks( "next" )

            e.preventDefault()

        } )

    }

在jquery轮播上显示上一张幻灯片而不是下一张幻灯片

1 个答案: