Как вращать вкладки

Я подписался еще так извините за такой простой вопрос!
Я хочу, чтобы вкладки автоматически переключались каждые 5 секунд, например, как это реализовать?
мой код:
HTML-код:

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">first</a></li>
        <li><a href="#tab2">second</a></li>
        <li><a href="#tab3">third</a></li>
        <li><a href="#tab4">fourth</a></li>
        <li><a href="#tab5">fifth</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab active">
            <img src="first.jpg" alt="" />
        </div>
        <div id="tab2" class="tab">
            <img src="second.jpg" alt="" />
        </div>
        <div id="tab3" class="tab">
            <img src="third.jpg" alt="" />
        </div>
        <div id="tab4" class="tab">
            <img src="fourth.jpg" alt="" />
        </div>
        <div id="tab5" class="tab">
            <img src="fifth.jpg" alt="" />
        </div>
    </div>
</div>

JS код:

$('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $('.tabs ' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    $(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
});

заранее спасибо!

1 ответ

Решение

Возможно что-то вроде:

var current_tab = 1;
var number_of_tabs = 5;
window.setInterval(function(){
    if(current_tab == number_of_tabs){
        current_tab = 1;   
    }else{
        current_tab++;
    }
    $('#tab'+current_tab).show().siblings().hide();    
    $('#tab'+current_tab).parent('li').addClass('active').siblings().removeClass('active');
}, 5000);

Скрипка: http://jsfiddle.net/Ve4sg/1/

Другие вопросы по тегам