0


I am trying to make the bootstrap tabnavigation as a slideshow like switching the tabs automatically and I want to reset the timer when user click the navigation buttons, but here it is not working please help me to fix the problem in this script.
I tried it here 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 code is here:,

<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>
4

1 回答 1

1

jsFiddle Demo

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

        var index = tabsPagenationDots.index(this);

        tabsBox.eq(index).show();
    });
于 2013-09-12T11:21:06.947 回答