如何根据鼠标单击单独的图像库设置 jCarousel 的起始图像？

Question

我有一个页面，其中包含一个 jCarousel 滑块（在 div 中）和一个包含缩略图列表的 div。轮播在页面初始加载时隐藏，而缩略图则可见。我想要实现的是，当用户单击特定的缩略图时，缩略图列表（或者我应该说是图库）会淡出，而轮播变得可见，并且首先显示的单击缩略图的图像的较大版本旋转木马。我尝试将轮播的配置选项“start”设置为包含单击的缩略图 ID 的变量，但这给了我奇怪的结果。任何帮助将不胜感激！这是我的代码：

<script type="text/javascript">
$(document).ready(function() {
    var currImage;
    $('#carousel').hide();
    $('.thumb').click(function(){
        $('#thumbs').fadeOut('slow');
        currImage = $(this).attr('id');

        $('#mycarousel').jcarousel({
            start: currImage,
            visible: 1,
            scroll: 1  
        });
        $('#carousel').fadeIn('slow');      
    }); 
});
</script>
<div id="thumbs">
    <ul class="thumb-display">
        <li>
            <a class="thumb" href="#" id="1">
                <img src="pic1-thumb.jpg" />
            </a>
        </li>
        <li>
            <a class="thumb" href="#" id="2">
                <img src="pic2-thumb.jpg" />
            </a>
        </li>
    </ul>
</div>
<div id="carousel">
    <ul id="mycarousel" class="jcarousel-skin-tango">
        <li><img src="pic1-large/></li>
        <li><img src="pic2-large/></li>
    </ul>
</div>

Answer 1

看来简单的答案是 start 是从 0 开始的，而不是从 1 开始的。

因此尝试使用：

    $('#mycarousel').jcarousel({
        start: currImage - 1,
        visible: 1,
        scroll: 1  
    });

来初始化 jCarousel。

或者，插件可以正确确定图像的尺寸吗？如果没有，请尝试添加明确的 height 和 width 属性或 CSS 样式。

此外，ID 可能不是最好的“1”、“2”等。请改用 data-imagenum 属性或类似属性。

Answer 2

pphou，您对 jCarousel 的预期用途与 带有外部控件的轮播示例。

诀窍是在 initCallback 函数中将缩略图设置为外部控件。

代码将如下所示：

javascript:

$(document).ready(function() {
    $thumbs = $('#thumbs');
    $carousel = $('#mycarousel').hide();
    $carousel.jcarousel({
        visible: 1,
        scroll: 1,
        initCallback: function(carousel) {
            $thumbs.find('a').on('click', function() {
                carousel.scroll($.jcarousel.intval($(this).attr('id')));
//              carousel.scroll($.jcarousel.intval($(this).index()));//may work, if so then omit ids from the HTML
                $thumbs.fadeOut('slow');
                $carousel.fadeIn('slow');
                return false;
            });
        }
    });
});

未测试

您可能需要稍微修改一下代码才能得到您想要的结果。

您还需要建立一种从轮播返回缩略图的方法。我没有谈到这方面。

请记住，如 gregL 指出的那样，将缩略图 ID 从 0（零）开始编号。