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縮略圖滾動

回答

相關問題