如果你去这个链接：http ://hutchcreative.co.uk/rod/ ，你可以看到一个现场版的轮播。
我在屏幕的每一侧都设置了左右绿色按钮。但是，我希望让一个循环到最后一张/上一张幻灯片而不是下一张幻灯片。我不确定如何编辑 jquery 来实现这一点。
这是整个 jquery 以防万一需要更多。
jQuery（文档）.ready（函数（$）{
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>
谢谢！