Javascript Jquery+；HTML缩略图卷轴

我想创建一个包含上一个按钮和下一个按钮的缩略图列表，一次显示10个缩略图，隐藏其余的缩略图。当您到达第10个tumbnail并单击“下一步”按钮时，第一个缩略图将消失并出现在第11个

我试过： Javascript

jQuery(document).ready(function() {
    var count = 0;
    var images = 11;
    var page = 1;
    var current = 1;

    jQuery('.ice-navigator li').each(function(index) {
        count++;

        jQuery(this).attr('id', 'menu-item-' + count);
        jQuery(this).attr('class', 'menu-page-' + page);

        if(count >= (page * images)) {
            page++;
        }

        jQuery(this).hide();
    })

    jQuery('.ice-navigator li.menu-page-1').show();
    jQuery('.ice-next').click(function() {
        if(current >= count) {
            current = 1;
        } else {
            current++;
        }

        item = jQuery('.ice-navigator li#menu-item-' + current);
        if(jQuery(item).hasClass('active')) {
            jQuery(item).removeClass('active');
            page = jQuery('.ice-navigator li#menu-item-' + current).attr('class');
            jQuery(item).addClass('active');
        } else {
            page = jQuery('.ice-navigator li#menu-item-' + current).attr('class');
        }

        jQuery('.ice-navigator li').hide();
        jQuery('.ice-navigator li.' + page).show();
    })

    jQuery('.ice-previous').click(function() {
        current--;
        if(current <= 0) {
            current = count;        
        }

        item = jQuery('.ice-navigator li#menu-item-' + current);
        if(jQuery(item).hasClass('active')) {
            jQuery(item).removeClass('active');
            page = jQuery('.ice-navigator li#menu-item-' + current).attr('class');
            jQuery(item).addClass('active');
        } else {
            page = jQuery('.ice-navigator li#menu-item-' + current).attr('class');
        }
    })

    jQuery('.ice-navigator li').click(function() {
        current = jQuery(this).attr('id').replace('menu-item-', '');
    })
})

jQuery（文档）.ready（函数（）{
var计数=0；
var=11；
var-page=1；
无功电流=1；
jQuery（'.ice navigator li'）。每个（函数（索引）{
计数++；
jQuery（this）.attr（'id'，'menu item-'+count）；
jQuery（this.attr（'class'，'menu page-'+page）；
如果（计数>=（页面*图像））{
page++；
}
jQuery（this.hide（）；
})
jQuery（'.ice navigator li.menu-page-1'）.show（）；
jQuery（'.ice next'）。单击（函数（）{
如果（当前>=计数）{
电流=1；
}否则{
电流++；
}
item=jQuery（'.ice navigator li#菜单项-'+current）；
if（jQuery（item）.hasClass（'active'））{
jQuery（item.removeClass（'active'）；
page=jQuery（'.ice navigator li#菜单项-'+current）.attr（'class'）；
jQuery（item）.addClass（'active'）；
}否则{
page=jQuery（'.ice navigator li#菜单项-'+current）.attr（'class'）；
}
jQuery（'.ice navigator li'）.hide（）；
jQuery（'.ice navigator li.'+page）.show（）；
})
jQuery（'.ice-previous'）。单击（函数（）{
当前--；
如果（当前编辑：我现在理解它就像一个循环参考。我做了一些相应的更改

在这里查看我更新的

下面是当你到达终点时停止的常规导航

在这里检查我的旧

我使用了两个指针来管理开始和结束位置。实现了adjustNav功能以根据开始和结束位置显示/隐藏div。
这看起来像是jCarousel的工作：

还有其他插件提供这一功能。我刚刚在另一个项目中使用了jCarousel，这是我想到的第一件事

编辑

我不知道你不想使用插件。你可以用手工编码的jQuery来实现这一点，但你将要编写大量代码。
你可能想查看现有的插件。滚动是一个不错的插件。我不想要新插件，因为我已经有了一个插件，当我单击“上一个”和“下一个”时，缩略图会被激活或者显示大图的缩略图。mm基本代码只有34行。代码不多。我相信你可以用更少的代码实现同样的效果：P这很好，但当li列表结束时，我需要在再次单击“下一步”时转到第一个li。当我单击“上一步”时，上一个li为0，想转到最后一个li。明白吗？请参阅我的最新演示如果那是你想要的，我会告诉我的？
<div class="ice-previous">Previous</div>
<div class="ice-navigator-wrapper clearfix">
    <div class="ice-navigator-outer">
        <ul class="ice-navigator">
            <li>THUMBNAIL 1</li>
            <li>THUMBNAIL 2</li>
            [...]
            <li>THUMBNAIL 11</li>
            <li>THUMBNAIL 12</li>
        </ul>
    </div>
</div>
<div class="ice-next">Next</div>