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的预期用法与Carousel with External Controls示例非常相似。

诀窍是在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;
            });
        }
    });
});

未经测试

您可能需要稍微使用代码来获得您想要的内容。

您还需要建立一种回传旋转木马缩略图的方法。我没有解决这方面的问题。

请记住将缩略图ID从0（零）编号为gregL指出。

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

2 个答案: