1

使用 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”函数中添加一个点击函数，看看我是否可以像这样控制内部轮播：

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

正如我所尝试的那样，上述方法不起作用，这可能不会使内部转盘回到幻灯片的原始位置。

我去过多个不同的论坛，并在互联网上到处搜索，但我仍然无法找到任何可靠的帮助或帮助。我在这方面急需帮助，因为我没有选择。如果有人可以帮助我，我将非常感激。我还是 Web 开发的新手，需要指导。

4

0 回答 0