0

以下のコードを使用して、Twitter Bootstrap の垂直タブをカルーセルのように機能させていますが、一時停止/再生 (再開) ボタンを追加したいと考えています。jsfiddleを参照してください

関連する JS は次のとおりです。

    $(function() {
        var tabCarousel = setInterval(function() {
            var tabs = $('#tab-carousel .nav-tabs > li'),
                active = tabs.filter('.active'),
                next = active.next('li'),
                toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

            toClick.trigger('click');
        }, 3000);
    });

誰でも考えますか？

4

3 に答える 3

1

トグルボタンを追加するのはどうですか

<button id="play" 
        type="button" 
        class="btn active" data-toggle="button">Toggle</button>

ナビゲートする前にアクティブかどうかを確認しますか？

$(function() {
    var tabCarousel = setInterval(function() {
        var tabs = $('#tab-carousel .nav-tabs > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

        if(running()) {
            toClick.trigger('click');
        }
    }, 3000);
});

function running() {
    return $('#play').hasClass('active');
}

これは必要なことを行いますが、忙しいのは好きではありません。

于 2013-03-22T10:02:56.747 に答える
0

一時停止/再生ボタンを追加

< button id="pause" type="button" class="btn active">< i class="icon-pause"></i></button>

脚本：

var runTabCarousel = true; 


$(function() {
    var tabCarousel = setInterval(function() {
        if(runTabCarousel){
        var tabs = $('#tab-carousel .nav-tabs > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

        toClick.trigger('click');
        }
    }, 3000);

    $("#pause").click(function() { 
        runTabCarousel = !runTabCarousel; 
        if(runTabCarousel){
            $(this).find("i").addClass("icon-pause");
            $(this).find("i").removeClass("icon-play"); 

        }
        else{
            $(this).find("i").addClass("icon-play");
            $(this).find("i").removeClass("icon-pause"); 

        }
    }); 



});
于 2013-03-28T15:54:03.587 に答える