Автоматическое переключение вкладок в javascript или jquery

Я построил отличаемую систему вкладок (4 вкладки) с помощью jquery. Он работает вручную, но я хочу сделать его цикл автоматически, то есть каждые 5 секунд. Я могу вызвать каждую вкладку с помощью щелчка, но я не знаю, как вернуться к началу с 1-й вкладки, как только она достигнет последней вкладки.

Кодирование слишком долго, чтобы пройти здесь, поэтому я сделал ссылку на jsfiddle: http://jsfiddle.net/ZSPX3/

Я просто хочу пройтись по каждой вкладке и щелкнуть по каждой из них, а затем начать с начало вкладки снова, как в I want an infinite slideshow. Но я застрял...

Я не хочу никаких плагинов, я хочу научиться делать это своими руками, пожалуйста.

Большое спасибо

2 3
javascript jquery slideshow

2 ответа:

Ключевая часть здесь-проверить индекс текущей вкладки и посмотреть, есть ли какие-либо вкладки за ней. Если нет, вернитесь к первой вкладке. Итак:

HTML

<ul id='tabs'>
    <li class='on'>tab 1</li>
    <li>tab 2</li>
    <li>tab 3</li>
    <li>tab 4</li>
    <li>tab 5</li>
</ul>

CSS 

#tabs { list-style: none; margin: 0; padding: 0; }
#tabs li { float: left; background: #ddd; padding: 6px; }
#tabs li.on { background: #f90; color: #fff; }

JS (предполагается jQuery) 

$(function() {

    //cache a reference to the tabs
    var tabs = $('#tabs li');

    //on click to tab, turn it on, and turn previously-on tab off
    tabs.click(function() { $(this).addClass('on').siblings('.on').removeClass('on'); });

    //auto-rotate every 5 seconds
    setInterval(function() {

            //get currently-on tab
        var onTab = tabs.filter('.on');

            //click either next tab, if exists, else first one
        var nextTab = onTab.index() < tabs.length-1 ? onTab.next() : tabs.first();
        nextTab.click();
    }, 5000);
});

Мы сравниваем (нуль-индексированный) индекс текущей вкладки с общим числом вкладок (-1, чтобы учесть нуль-индексирование). Если первое ниже, чем второе, есть еще несколько вкладок; если нет, то есть они равны, мы достигли конца-вперед вернемся к началу.

Надеюсь, это поможет.

4

Вот какой код вы можете использовать:

JQuery: 

setInterval(function() {
    var current = parseInt($('li.selected a').data('links-to').split('_')[1],10);
    var idx=current-1;
    var max = $('.carouselLinks li a').length;
    idx = (current<max) ? (idx+1):0;
    $('a:eq('+idx+')').trigger('click');
}, 3000);

Обновлено пример jsFiddle.

1