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一起工作。。检查我的演示

更改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());
});