Question

使用JCarousel我目前在另一个旋转木马中有一个旋转木马，我可以通过点击我在外面旋转木马上创建的播放按钮来触发开始播放幻灯片。这些都是动态加载的。

当我点击更改外部旋转木马的滑动时，我想让内部旋转木马停止动画并返回到原始加载位置。

Here is what I have currently for manipulating JCarousel:
//outer carousel
$('#carousel').jcarousel({
    auto: 0,
    wrap: 'circular',
    scroll: 1,
    initCallback: carousel_initCallBack,
    itemVisibleInCallback: {
        onBeforeAnimation:  gallerycarousel_itemfirst
}

// Info Box

$('.info').click(function() {
    var itemid = $(this).attr('id').substring(5);
    $.ajax({
        url: 'php/get_case_studies.php?item=' + itemid,
        dataType: 'json',
        success: function(data) {
            var infobox = $('#box_info' + data.data[0].id)
            infobox.html('');
                var content = '<div class="main_sec">'+data.data[0].main_desc+'</div><div class="sec_sec">'+data.data[0].sec_desc+'</div><div class="visit"><span class="box_num"><img src="img/visitor.png" alt="#" /> Visitors:</span>'+data.data[0].visitors+'</div><div class="avg"><span class="box_num"><img src="img/time.png" alt="#"/> Average time on site:</span>'+ data.data[0].avg_time +'</div><a href="'+ data.data[0].url +'" target="_blank" class="link"></a>';
                infobox.append(content);
            $('.box_info').animate({left: '0px'}, 200);
        }
    });     
});

function carousel_initCallBack(carousel) {
    carousel.clip.hover(function() {
        $('.gallery_control').stop().animate({"top": "454px"}, 200);
        carousel.stopAuto();
    }, function() {
        $('.gallery_control').stop().animate({"top": "524px"}, 200);
        $('.box_info').animate({left: '-302px'}, 200 );
        carousel.startAuto();
    });

    $('#gallerycarousel_controls .btn_right').click(function() {
        carousel.next();
        return false;
    });

    $('#gallerycarousel_controls .btn_left').click(function() {
        carousel.prev();
        return false;
    });

    $('.grid').click(function() {
        $('.gallery_control').animate({"top": "524px"}, 200);
        $('#grid_view').fadeIn('slow');
        carousel.stopAuto();
        $('#grid_view').mouseleave(function() {
        $(this).fadeOut('slow');
        carousel.startAuto();
        });
    });

     $('#carousel_slides .btn_item').click(function() {
        carousel.scroll($.jcarousel.intval($(this).attr('id')));
        $('#grid_view').fadeOut('slow');
        $('.gallery_control').animate({"top": "454px"}, 200);
        return false;
    });

    //this is the play button which generates and starts the inner carousel
    $('.play').click(function() {
        var itemid = $(this).attr('id').substring(5);
        $('#int_carousel' + itemid).load('get_slideshow.php?slideshow&item=' + itemid, function() {
            $('#int_carousel' + itemid).jcarousel({
                auto: 3,
                wrap: 'circular',
                scroll: 1
            });
        });
    });
}

我尝试在'carousel_initCallBack'函数中添加一个click函数，看看我是否可以像这样控制内部轮播：

 $('#gallerycarousel_controls .btn_right').click(function() {
        $('#int_carousel' + itemid).stopAuto(); 
    });

上述方法无法正常使用，这可能不会将内部转盘带回幻灯片的原始位置。

我已经访问了多个不同的论坛，并且一直在网上搜索我无法找到任何可靠的帮助或帮助。当我用完选项时，我急需帮助。如果有人可以帮助我，我会非常感激。我还是网络开发的新手，需要指导。

我如何控制另一个JCarousel内的JCarousel？

0 个答案: