Question

我想创建一个缩略图列表，其中前一个按钮和下一个按钮，一次显示10个缩略图并隐藏其余缩略图，当您到达第10个缩略图并单击下一个按钮时，第一个按钮消失并显示为第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-', '');
    })
})

HTML

<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>

谢谢！

Answer 1

编辑：我现在明白它就像一个循环引用。我已做了相应的改动。

在此处查看我更新的 DEMO

以下是常规导航，当你到达终点时停止。

点击此处旧DEMO 。

我使用2个指针来管理开始和结束位置。实现了adjustNav函数，根据开始和结束位置显示/隐藏div。

Answer 2

这看起来像jCarousel的工作： http://sorgalla.com/jcarousel/

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

修改

我没有意识到你不想使用插件。你可以使用手工编写的jQuery来做这件事，但是你将会编写很多代码。

Jquery + HTML缩略图滚动

2 个答案: