Javascript 带缩略图导航和缩略图分页的滑块

我找了很多，但什么也没找到。嗯，我需要一个带缩略图导航的滑块，缩略图导航应该有分页。我只想显示四个缩略图，但我总共有16个，所以我想为缩略图分页

第1页，共2页
//设立画廊
$（'画廊'）。画廊({
“行”：1，
“科尔斯”：5
});
//一些额外的接口材料。。。别理窗帘后面的那个人
var gallery=$（“#gallery wrapper”）、setup=$（“#setup wrapper”）；
setup.hide（）；
$（“#显示设置”）。单击（函数（）{
画廊淡出（400，功能（）{
setup.fadeIn（）；
});
返回false；
});
$（“#显示库”）。单击（函数（）{
setup.fadeOut（400，函数（）{
fadeIn（）画廊；
});
返回false；
});
$（'nav wrapper'）.jfollow（'followbox'，20）；

我尝试了很多，我发现了这个例子：

---

但是我如何创建一个编号的分页，比如“1,2,3,4,5”，而不是使用上一个或下一个按钮？我想不出来。

我试过了，请看上面的链接。我已经编辑了，现在我也发布了代码。我无法在此代码中创建编号分页

              <div id="gallery-wrapper">

                <div id="viewer-wrapper">

                    <div id="gallery-viewer">
                        <img alt="Placeholder" src="images/placeholder.png">
                    </div><!-- #gallery-viewer -->

                </div><!-- #viewer-wrapper" -->

                <div id="viewer-nav">
                    <a id="gallery-viewer-next" href="#">next</a>
                    <a id="gallery-viewer-prev" href="#">previous</a>
                </div><!-- #viewer-nav -->

                <div id="thumbs-nav">
                    <a id="gallery-next" href="#">next</a><a id="gallery-prev" href="#">previous</a><p id="gallery-pos">page 1 of 2</p>
                </div>

                <div id="thumbs-wrapper">

                    <div id="gallery">

                        <div class="thumbnail">
                            <img alt="Wasteland" src="gallery/thumbs/wasteland.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Woods" src="gallery/thumbs/woods.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Tree Path" src="gallery/thumbs/treepath.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Cobblestone Road" src="gallery/thumbs/stoneroad.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Street" src="gallery/thumbs/street.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Tree Path" src="gallery/thumbs/treepath2.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Desert" src="gallery/thumbs/desert.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Misty Woods" src="gallery/thumbs/mistywoods.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Woodsy Stairs" src="gallery/thumbs/woodsystairs.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Snowy Trees" src="gallery/thumbs/snowytrees.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Street" src="gallery/thumbs/street2.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="City" src="gallery/thumbs/city.jpg">
                        </div><!-- .thumbnail -->

                    </div><!-- #gallery -->

                </div><!-- #thumbs-wrapper -->

            </div>




<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="js/jquery.jfollow.js"></script>
        <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
        <script type="text/javascript" src="js/jquery.ImageGallery.js"></script>
        <script type="text/javascript">
            // set up the gallery
            $('#gallery').gallery({
                'rows': 1,
                'cols': 5
            });

            // some extra interface stuff... pay no attention to the man behind the curtain
            var gallery = $('#gallery-wrapper'), setup = $('#setup-wrapper');
            setup.hide();
            $('#show-setup').click(function(){
                gallery.fadeOut(400,function(){
                    setup.fadeIn();
                });
                return false;
            });
            $('#show-gallery').click(function(){
                setup.fadeOut(400,function(){
                    gallery.fadeIn();
                });
                return false;
            });
            $('#nav-wrapper').jfollow('#followbox', 20);
        </script>