Question

At the moment I have the following html structure on a feature section:

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

The ‘Featured’ tabs have corresponding divs with hidden content, at default the first ‘Featured 1’ is loaded into the container to show off this featured content and 2 and 3 are display:none;

The other list items (‘Item 2’, ‘Item 3’, etc.) are loaded via jQuery load() on click into the feature container replacing whatever is currently in it and the same is done if a ‘Featured’ tab is clicked.

What I want to do is rotate the first 3 featured tabs related content on ready for say 5 seconds each until any of the tabs are clicked and then it should stop.

I was using .tabs to do this with ui.js and ui-tabs.js but it adds a lot of uneeded js code and it’s probably easier to do it with a custom function but I’m a little stumped as how best to do a timer based loop. With the .tabs() it was basically simulating a click to show the content but why not just loop through the content tabs whilst setting the related li class using addClass('clicked'); to show which is currently being shown.

To sum up I need the function to do the following pseudo code:

1. On load
2. FadeIn <div id=tab1"> and addClass(“clicked”); to <li title="#tab1">
3. FadeOut <div id=tab1"> after 5 seconds and removeClass <li title="#tab1">
4. FadeIn <div id=tab2"> and addClass(“clicked”); to <li title="#tab2">
5. FadeOut <div id=tab2"> after 5 seconds and removeClass <li title="#tab2">
6. FadeIn <div id=tab3"> and addClass(“clicked”); to <li title="#tab3">
7. FadeOut <div id=tab3"> after 5 seconds and removeClass <li title="#tab3">
8. Go back to step 2

If any ul li are clicked then stop the function from running.

Answer 1

Perhaps something like this?

(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);
    });
})();