jQuery + HTML缩略图滚动 [英] Jquery + HTML Thumbnail scroll

问题描述

我想创建一个缩略图列表，上面有一个按钮，下一个是另一个按钮，一次显示10个缩略图，然后隐藏其余的缩略图，当您到达第10个缩略图时，单击下一步按钮，第1个消失并显示第11个

I want to create a list of thumbnails with a button previous and another next, showing 10 thumbnails at a time and hiding the rest, and when you reach the 10th tumbnail and click the next button, the 1st disappear and appear the 11th.

我尝试过: 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>

谢谢！

推荐答案

编辑:我现在知道它就像一个循环引用.我做了相应的更改.

Edit: I now understand it is like a circular ref. I have made some changes accordingly.

在这里查看我更新的 演示

See my updated DEMO here

以下是常规导航，到达终点时会停止.

Below is for regular nav which stops when you reach the end.

在此处检查我的旧演示 .

Check my old DEMO here.

我使用2个指针来管理开始和结束位置.实现了AdjustNav功能，可根据开始和结束位置显示/隐藏div.

I used 2 pointers to manage the start and end position. Implemented adjustNav function to show/hide div based on start and end position.

这篇关于jQuery + HTML缩略图滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！