jQuery的幻灯片缩略图显示/隐藏

Question

我曾问及做了如下代码：

$(document).ready(function() { 
    $('.gallery').each(function(index, element) { 
     var id = $(this).attr('id'); 
     var images = $('#' + id + ' .content li').index() -1; 

     $('#' + id + ' .prev').click(function(e) { 
      e.preventDefault(); 

      if($('#' + id + ' .content .current').prev().length == 0) { 
       $('#' + id + ' .content .current').fadeOut(1000).removeClass('current').hide(); 
       $('#' + id + ' .content li:last').fadeIn(1000).addClass('current').show(); 
      } else { 
       $('#' + id + ' .content .current').removeClass('current').fadeOut(1000).hide().prev().fadeIn(1000).addClass('current').show(); 
      } 

      return false; 
     }); 

     $('#' + id + ' .next').click(function(e) { 
      e.preventDefault(); 

      if($('#' + id + ' .content .current').next().length == 0) { 
       $('#' + id + ' .content .current').fadeOut(1000).removeClass('current').hide(); 
       $('#' + id + ' .content li:first').fadeIn(1000).addClass('current').show(); 
      } else { 
       $('#' + id + ' .content .current').removeClass('current').fadeOut(1000).hide().next().fadeIn(1000).addClass('current').show(); 
      } 

      return false; 
     }); 

     $('#' + id + ' .thumbnails li').click(function(e) { 
      e.preventDefault(); 

      $('#' + id + ' .content .current').removeClass('current').hide(); 
      $('#' + id + ' .content .thumbnails').removeClass('current'); 
      $('#' + id + ' .content li').eq($(this).index()).fadeIn(1000).addClass('current').show(); 

      return false; 
     }); 

     $('#' + id + ' .thumbnails ul').css('width', $('#' + id + ' .thumbnails ul li').length * scrollWidth + 'px'); 
     $('#' + id + ' .content li:first').addClass('current').show(); 
    }); 
}); 

的HTML：

<div id="galerry-one" class="gallery"> 
    <div class="content"> 
     <ul> 
      <li id="content-1"><img src="image1.jpg" /></li> 
      <li id="content-2"><img src="image2.jpg" /></li> 
      <li id="content-3"><iframe src="http://www.youtube.com/..."></iframe></li> 
      <li id="content-4"><img src="image3.jpg" /></li> 
      <li id="content-5"><iframe src="http://www.youtube.com/..."></iframe></li> 
     </ul> 
    </div> 
    <div class="thumbnails"> 
     <span class="prev"> « </span> 
     <ul> 
      <li id="go-content-1"><img src="image1_thumbnai.jpg" /></li> 
      <li id="go-content-2"><img src="image2_thumbnai.jpg" /></li> 
      <li id="go-content-3"><img src="youtube1_thumbnai.jpg" /></li> 
      <li id="go-content-4"><img src="image3_thumbnai.jpg" /></li> 
      <li id="go-content-5"><img src="youtube2_thumbnai.jpg" /></li> 
     </ul> 
     <span class="next"> » </span> 
    </div> 
</div> 

现在的问题是，我怎么能限制到4个缩略图每次我点击上一个/下一个？

Answer 1

我也有类似的实施显示4项与上一个/下一个选项滚动。所以，我只是修改了一下它与您的HTML工作..检查我DEMO

变化elToShow VAR来定制你想要多少缩略图显示。

var stPt = 0, elToShow = 4; //showing 4 elements 

var $ul = $('.thumbnails ul'); 
var $li = $('.thumbnails ul li'); //get the list of li's 
var $copy_li = []; 
var copy_lgt = $li.length - elToShow; 

//call to set thumbnails based on what is set 
initNav(); 
function initNav() { 
    var tmp; 
    for (var i = elToShow; i < $li.length; i++) { 
     tmp = $li.eq(i); 
     $copy_li.push(tmp.clone()); 
     tmp.remove(); 
    } 
} 

$('.next').click (function() { 
    $li = $('.thumbnails ul li'); //get the list of li's 

    //move the 1st element clone to the last position in copy_li 
    $copy_li.splice(copy_lgt, 0, $li.eq(0).clone()); //array.splice(index,howmany,element1,.....,elementX) 

    //kill the 1st element in the UL 
    $li.eq(0).remove(); 

    //add to the last 
    $ul.append($copy_li.shift()); 
}); 

$('.prev').click (function() { 
    $li = $('.thumbnails ul li'); //get the list of li's 

    //move the 1st element clone to the last position in copy_li 
    $copy_li.splice(0, 0, $li.eq(elToShow-1).clone()); //array.splice(index,howmany,element1,.....,elementX) 

    //kill the 1st element in the UL 
    $li.eq(elToShow-1).remove(); 

    //add to the last 
    $ul.prepend($copy_li.pop()); 

});