jquery - 将暂停按钮添加到 jQuery Twitter Bootstrap 垂直选项卡轮播

Question

我有 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);
    });

任何人的想法？

Answer 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');
}

这可以满足您的需要，尽管我不喜欢它忙于等待。

Answer 2

添加暂停/播放按钮

<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"); 

        }
    }); 



});

Answer 3

这是我使用的最终版本：

<script type="text/javascript">
      jQuery(document).ready(function($) {
        $('button#play').click(function() {
              if ($(this).text() == 'Pause') {
                  $(this).text('Play');
                  $(this).attr('aria-label', 'Play'); 
              } else {
                  $(this).text('Pause');
                  $(this).attr('aria-label', 'Pause');
              }
         });

        $(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(!$('#play').hasClass('active')) {
              toClick.trigger('click');
            } 
          }, 6000);
        });
      });
</script>

这是页面代码：

<div id="tab-carousel" class="tabbable tabs-left"> 
    <ul class="nav nav-tabs">
        <li><a href="#tab1" data-toggle="tab">Tab 1</li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</li>
        <li><a href="#tab4" data-toggle="tab">Tab 4</li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1"><p>Content here.</p></div>
        <div class="tab-pane" id="tab2"><p>Content here.</p></div>
        <div class="tab-pane" id="tab3"><p>Content here.</p></div>
        <div class="tab-pane" id="tab4"><p>Content here.</p></div>
        <div class="pull-right"><button id="play" type="button" class="btn btn-primary btn-small" data-toggle="button" title="Pause">Pause</button>
      </div>                            
    </div>
</div>