Question

我试图将bootstrap tabnavigation作为幻灯片显示，如自动切换选项卡，我想在用户单击导航按钮时重置计时器，但在这里它不起作用请帮我修复此脚本中的问题。
我在这里尝试了 jsfiddle

tabSlideshowSetup('#slideshowOne');
tabSlideshowSetup('#slideshowTwo');

function tabSlideshowSetup(parent) {
    var toime = 0;
    var tabs = $(parent).children('.dot-nav > li');
    var tabsPagenationDots = $(parent).children('.dot-nav > li > a');
    function imgFunc(){
      var  active = tabs.filter('.active'),
        next = active.next('li'),
        toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
        toClick.trigger('click');
        clearInterval(toime);
        toime=setInterval(imgFunc, 18000);
    }
    toime=setInterval(imgFunc, 18000);
    tabsPagenationDots.click(function(){
        clearInterval(toime);
        toime=setInterval(imgFunc, 18000);
    });
}

Html代码在这里：，

<div id="slideshowOne" class="row-fluid">
        <div class="tab-content row-fluid" id="testimonial-section"> 
            <div class="row-fluid tab-pane active" id="ttta">
                    <p class="testimonial-detail"><a href="https://twitter.com/anandlunia" target="_blank">Anand Lunia</a>, <small> India Quotient Founder, Angel Investor </small></p>
            </div>
            <div class="row-fluid tab-pane" id="tttb">
                    <p class="testimonial-detail"><a href="https://twitter.com/Raghu_Dixit" target="_blank">Raghu Dixit</a>, <small>Renowned Musician </small></p>
            </div>
            <div class="row-fluid tab-pane" id="tttc">
                    <p class="testimonial-detail"><a href="https://twitter.com/surekhapillai" target="_blank">Surekha Pillai</a>, <small>Communications Consultant </small></p>
            </div>
          </div>  
          <ul class="nav nav-tabs dot-nav" id="testimonial_tab">
                <li class="active"><a href="#a" data-toggle="tab"></a></li>
                <li><a href="#b" data-toggle="tab"></a></li>
                <li><a href="#c" data-toggle="tab"></a></li>
          </ul>
        </div>

<div id="slideshowTwo" class="row-fluid">
        <div class="tab-content row-fluid" id="testimonial-section"> 
            <div class="row-fluid tab-pane active" id="ttta">
                    <p class="testimonial-detail"><a href="https://twitter.com/anandlunia" target="_blank">Anand Lunia</a>, <small> India Quotient Founder, Angel Investor </small></p>
            </div>
            <div class="row-fluid tab-pane" id="tttb">
                    <p class="testimonial-detail"><a href="https://twitter.com/Raghu_Dixit" target="_blank">Raghu Dixit</a>, <small>Renowned Musician </small></p>
            </div>
            <div class="row-fluid tab-pane" id="tttc">
                    <p class="testimonial-detail"><a href="https://twitter.com/surekhapillai" target="_blank">Surekha Pillai</a>, <small>Communications Consultant </small></p>
            </div>
          </div>  
          <ul class="nav nav-tabs dot-nav" id="testimonial_tab">
                <li class="active"><a href="#a" data-toggle="tab"></a></li>
                <li><a href="#b" data-toggle="tab"></a></li>
                <li><a href="#c" data-toggle="tab"></a></li>
          </ul>
        </div>

Answer 1

jsFiddle Demo

tabsPagenationDots.click(function () {
        clearInterval(toime);
        toime = setInterval(imgFunc, 3000);
        tabsBox.hide();

        var index = tabsPagenationDots.index(this);

        tabsBox.eq(index).show();
    });

Bootstrap幻灯片无法正常工作

1 个答案: