jquery - 如何在页面上有多个 jquery 循环画廊，但只有一个处于事件状态？

Question

我想在一个页面上有几个自行车画廊，但一次只有一个处于事件状态，其他则隐藏。理想情况下，单击链接(列表中的缩略图)将激活下一个周期图库。合理？以前有人这样做过吗？希望给点建议，谢谢!

Answer 1

未经测试，但类似这样的东西应该很接近:

$(document).ready(function() {
    // initialize and hide both slideshows
    $('#gallery1,#gallery2').each(function() {
        var $nav = $('<ul class="gallery-nav">').insertBefore(this);
        $(this).cycle({
            fx:     'slideY',
            speed:  '1000',
            timeout: 6000,
            pager:   $nav,
            pagerAnchorBuilder: function(i) {
                return '<li><a href="#">'+(i+1)+'</a></li>';
            }
        }).cycle('pause').hide();
    });     

    // bind click triggers to show/hide galleries
    $('.gallery1,.gallery2').click(function() {
        var isOne = $(this).is('.gallery1');
        var showId = '#gallery' + isOne ? 1 : 2;
        var hideId = '#gallery' + isOne ? 2 : 1;
        $(hideId).cycle('pause').hide();
        $(showId).show().cycle('resume');
        return false;
    });
});