jCarousel - 试图获得一些棘手的功能

Question

我想我正在努力做到不可能...... 我有一个标准的旋转木马，使用Jcarousel插件：

<ul id="mycarousel" class="jcarousel-skin-tango">
                    <li><img id="kid1" src="images/test-kid-2-graphic.jpg" alt="test-kid-2-graphic" width="90" height="90" /><p class="caption">This is Kid 2's caption</p></li>
                    <li><img id="kid2" src="images/test-kid-1-graphic.jpg" alt="test-kid-1-graphic" width="90" height="90" /><p class="caption">This is Kid 1's caption</p></li>
                    <li><img id="kid3" src="images/test-kid-3-graphic.jpg" alt="test-kid-3-graphic" width="90" height="90" /><p class="caption">This is Kid 3's caption</p></li>
                    <li><img id="kid4" src="images/test-kid-1-graphic.jpg" alt="test-kid-1-graphic" width="90" height="90" /><p class="caption">This is Kid 1's caption</p></li>
                    <li><img id="kid5" src="images/test-kid-2-graphic.jpg" alt="test-kid-2-graphic" width="90" height="90" /><p class="caption">This is Kid 2's caption</p></li>
                    <li><img id="kid6" src="images/test-kid-3-graphic.jpg" alt="test-kid-3-graphic" width="90" height="90" /><p class="caption">This is Kid 3's caption</p></li>
                    <li><img id="kid7" src="images/test-kid-2-graphic.jpg" alt="test-kid-2-graphic" width="90" height="90" /><p class="caption">This is Kid 2's caption</p></li>
                    <li><img id="kid8" src="images/test-kid-1-graphic.jpg" alt="test-kid-1-graphic" width="90" height="90" /><p class="caption">This is Kid 1's caption</p></li>
                    <li><img id="kid9" src="images/test-kid-3-graphic.jpg" alt="test-kid-3-graphic" width="90" height="90" /><p class="caption">This is Kid 3's caption</p></li>
                    <li><img id="kid10" src="images/test-kid-1-graphic.jpg" alt="test-kid-1-graphic" width="90" height="90" /><p class="caption">This is Kid 1's caption</p></li>
                </ul>
<div class="photo-divider"></div>
                <div class="large-image-container">
                    <img class="large-image" src="images/test-kid-1-graphic-large.jpg" alt="photo-detail-large-vertical" />
                </div>

                <div class="counter-container">
                    <span class="item-number"></span>
                    of
                    <span class="total"></span>
                </div>
                <div class="caption-container">
                    <p></p>
                </div>
                <div class="carousel-button-container">
                    <button id="mycarousel-next">Next</button>
                    <button id="mycarousel-prev">Previous</button>
                </div>

它显示6个缩略图，不是圆形的，并且一次滚动一个项目。第一个可见光图像（左侧）始终突出显示，大图像也会在滚动或点击时关闭。标题相同，对于您正在使用的项目＃也是如此。我在缩略图本身上有一个点击事件，我希望以类似的方式使用下一个和后一个按钮。以下是我目前在我的JS中的地方：

$(document).ready(function() {

var counter;
var total;
var last;
var itemNumZero;
var itemNum;
var toFirstZero;
var toFirst;
var imgAlt;
var imgSrc;
var capt;

function mycarousel_initCallback(carousel) {

    capt = $('#mycarousel li:first-child').children('p').html();
    $('.caption-container p').html(capt);
    total = $('#mycarousel li').size();
    $('.total').html(total);
    last = total - 5;

    $('#mycarousel li').click(function () {
        itemLoadCallbackFunction(carousel);
         itemNumZero = parseInt($(this).index());
         itemNum = itemNumZero  + 1;
         toFirstZero = parseInt($(this).index());
         toFirst = toFirstZero + 1;
         if (itemNum > last) {
            //scroll selected to the last possible position on click
            carousel.scroll(toFirstZero);
            $('#kid' + carousel.first).css('opacity', '.5');
            $('#mycarousel img').css('opacity', '.5');
            $(this).children('img').css('opacity', '1');
        }
        else {
            //scroll selected to the first position position on click
            carousel.scroll(toFirst);
            $('#mycarousel img').css('opacity', '.5');
            $('#kid' + carousel.first).css('opacity', '1');
        }
        //Switch the image on click
        imgAlt= $(this).children('img').attr('alt');
        imgSrc = "images/" + imgAlt + "-large.jpg";
        $('.large-image').attr('src', imgSrc)
        //Switch the caption on click
        capt = $(this).children('p').html();
        $('.caption-container p').html(capt);
        $('.item-number').html(itemNum);
        return false;
    });

    //Additional next & prev buttons
    $('#mycarousel-next').bind('click', function () {
        carousel.next();
        itemLoadCallbackFunction(carousel);
        return false;
    });

    $('#mycarousel-prev').bind('click', function () {
        carousel.prev();
        itemLoadCallbackFunction(carousel);
        return false;
    });

    $('.jcarousel-next').bind('click', function () {
        var last = carousel.last;
        if (last == 10) {

        }
        else {
            carousel.next();
            itemLoadCallbackFunction(carousel);
            return false;
        }
    });

    $('.jcarousel-prev').bind('click', function () {
        carousel.prev();
        itemLoadCallbackFunction(carousel);
        return false;
    });
}

//This is for next & back arrows
function itemLoadCallbackFunction(carousel) {
    //Take off selected state
    $('#mycarousel img').css('opacity', '.5');
    //Switch large image to src of first position
    var firstPos = $('#kid' + carousel.first).attr('src');
    $('.large-image').attr('src', firstPos.replace('graphic', 'graphic-large'));
    //Add selected state to first position only
    $('#kid' + carousel.first).css('opacity', '1');
    //Get item number of first position on load
    $('.item-number').html(carousel.first);
    var total = $('#mycarousel li').size();
    var last = total - 6;
    var firstItem = carousel.first

//  if (firstItem > last) {
//      $('#mycarousel-next').hide();
//  }
//  else if (firstItem == 1) {
//      $('#mycarousel-prev').hide();
//  }
//  else {
//      $('#mycarousel-next').show();
//      $('#mycarousel-prev').show();
//  }
}

$('#mycarousel').jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallback,
    setupCallback: itemLoadCallbackFunction
});
});

我已经被困了2天了 - 我想要做的是，当它完成滚动时，即第10项可见，如果用户点击下一步，继续突出显示图像，切换大图像src，并更新项目＃，就像在点击缩略图或点击下一个/上一个到达结束之前一样。就像图像的缩略图导航一样，下面有大预览。如果你点击下一个/上一个，你会在栏顶部看到六个滚动 - 如果你在最后，它仍然会突出显示该行，直到你到达最后一个项目。我被炒了 - 抱歉，如果这没有任何意义。