幻灯片放映上的下一个按钮。

Question

我有当前的代码：

<script type="text/javascript">

$(document).ready(function()
{

$('.showcase-content .description').jScrollPane();

$(".beericon").click(function() {
        var imgnumber = parseInt($(this).attr('id').replace("imglink", ""));
        var move = -($("#img"+imgnumber).width() * (imgnumber - 1));

        $("#img_box").animate({
            left: move
        }, 500);

        $("#beerview_icons").find("div").removeAttr("style");
        $("#imglink"+imgnumber).css("background-position", "0px -74px");

        return false;
    });
});
</script>

适用于：

<div id="img_container">
      <div id="img_box"> <img id="img1" src="../images/lightbox_brew_photos/cutthroat.png"/> <img id="img2" src="../images/beer_in_glasses/Cutthroat.png"/> 
<img id="img3" src="../images/lightbox_brew_photos/Cutthroat-6-Pack.png" style="margin-top:290px;"/> 
<img id="img4" src="../images/lightbox_brew_photos/Cutthroat-12-Pack.png" style="margin-top:335px;"/>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div id="beerview_icons">
      <div class="beericon" id="imglink1" style="background-position:0px -74px;"></div>
      <div class="beericon" id="imglink2"></div>
      <div class="beericon" id="imglink3"></div>
      <div class="beericon" id="imglink4"></div>
      <br class="clearfloat" />
    </div>

有没有办法修改js，以便它是一个基本的前一个下一个导航？我必须添加更多图像，这是一个较小的拇指空间。想象一下，尝试写一些东西比用不同的幻灯片重做更容易。