Jquery + HTML缩略图滚动

我想用上一个和下一个按钮创建一个缩略图列表，一次显示10个缩略图并隐藏剩下的缩略图，当您到达第10个缩略图并单击下一个按钮时，第1个消失并出现在11日。Jquery + HTML缩略图滚动

我已经试过： 的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>

谢谢！

来源

2012-01-05 Gabriel Santos

您可能想要查看现有的插件。可滚动是一个不错的选择。 http://flowplayer.org/tools/demos/scrollable/gallery.html – mrtsherman 2012-01-05 15:16:34

我不想要一个新的插件，因为我已经有一个插件缩略图，当我点击上一个和下一个或缩略图显示大的形象。 – 2012-01-05 15:20:29

编辑：我现在明白它就像一个循环的ref。我做了相应的改变。

看到我更新DEMO这里

下面是普通导航，当你到达终点停靠。

查看我的旧DEMO这里。

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

来源

2012-01-05 17:56:58

这很好，但是当li列表结束时，我需要再次点击下一步时去第一个li。而且，当我点击前一个和前一个li是0时，想要去最后一个li。理解？ – 2012-01-05 18:22:15

看到我的最新演示，并让我知道如果这是你想要的？ – 2012-01-05 22:08:41

感谢您的支持！我会学习你的演示=） – 2012-01-05 22:33:04

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

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

编辑

我不知道你不想使用插件。你可能用手写的jQuery来做这件事，但你会写很多代码。

来源

2012-01-05 18:00:56 Tim

毫米基本代码只是34行..没有太多的代码..我相信你可以在更小的代码中实现相同：P http://jsfiddle.net/skram/QScXU/4 / – 2012-01-05 18:05:01

Jquery + HTML缩略图滚动

回答

相关问题