將暫停按鈕添加到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

添加暫停/播放按鈕

<按鈕ID = 「暫停」 類型= 「按鈕」 類= 「BTN活性」> < I類= 「圖標暫停」> </i>的< /按鈕>

腳本：

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>