显示上一张幻灯片，而不是下一张jquery传送带上

Question

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

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

这里是整个jQuery只需要更多的需要。

jQuery的（文件）。就绪（函数（$）{

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

您可以定义跳过作为

跳跃= 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() 

    }) 

所以加一个VAR为skipLeft，一个用于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() 

     }) 

    }