цикл jQuery вращается через li без использования .tabs - PullRequest
Новая
       34

цикл jQuery вращается через li без использования .tabs

0 голосов
/ 21 декабря 2011

На данный момент у меня есть следующая html-структура в разделе функций: 

<ul>
    <li>
        <ul>
            <li title="#tab1">Featured 1</li>
            <li title="#tab2">Featured 2</li>
            <li title="#tab3">Featured 3</li>
        </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

На вкладках «Featured» есть соответствующие div с скрытым содержимым, по умолчанию первая «Featured 1» загружается вКонтейнер для демонстрации этого показанного содержимого, а 2 и 3 display:none;

Другие элементы списка («Элемент 2», «Элемент 3» и т. д.) загружаются с помощью jQuery load () при щелчке вконтейнер объектов, заменяющий то, что находится в нем в данный момент, и то же самое делается, если щелкнуть вкладку «Избранные».

Что я хочу сделать, так это повернуть первые 3 связанных содержимого закладок, готовых, скажем, на 5 секунд каждая, покапо щелчку на любой вкладке происходит остановка.

Я использовал .tabs, чтобы сделать это с помощью ui.js и ui-tabs.js, но он добавляет много ненужного кода js и, вероятно, прощечтобы сделать это с пользовательской функцией, но я немного озадачен тем, как лучше сделать цикл на основе таймера.С помощью .tabs () он в основном имитировал щелчок, чтобы показать содержимое, но почему бы просто не перебирать вкладки содержимого, устанавливая связанный класс li с помощью addClass('clicked');, чтобы показать, который в данный момент отображается.

ДляПодводя итог, мне нужно, чтобы функция выполняла следующий псевдокод:

  1. При загрузке
  2. FadeIn <div id=tab1"> и addClass ("clicked");<li title="#tab1">
  3. FadeOut <div id=tab1"> через 5 секунд и удалить Class <li title="#tab1">
  4. FadeIn <div id=tab2"> и addClass ("clicked");<li title="#tab2">
  5. FadeOut <div id=tab2"> через 5 секунд и удалить Class <li title="#tab2">
  6. FadeIn <div id=tab3"> и addClass ("clicked");на <li title="#tab3">
  7. FadeOut <div id=tab3"> через 5 секунд и removeClass <li title="#tab3">
  8. Вернитесь к шагу 2

Если нажата какая-либо строка, остановитесьфункция от запуска.

1 Ответ

1 голос
/ 21 декабря 2011

Может, как-то так? 

(function () {
    var current = 1;
    var total = 3;

    var gotoNext = function () {
        $('#tab' + current).fadeOut();

        if (current < total) {
            current++;
        }
        else {
            current = 1;
        }

        $('#tab' + current).fadeIn();
    };

    var interval = setInterval(gotoNext, 5000);

    $('ul li').click(function () {
        clearInterval(interval);
    });
})();
...