Question

目前我在功能部分有以下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>

“精选”标签包含隐藏内容的相应div，默认情况下，第一个“精选1”会加载到容器中以展示此精选内容，而2和3则为display:none;

其他列表项（'Item 2'，'Item 3'等）在点击时通过jQuery load（）加载到功能容器中，替换当前在其中的任何内容，如果'精选'则完成相同的操作单击选项卡。

我想要做的是旋转前3个精选标签相关内容，准备好说5秒，直到任何标签被点击然后它应该停止。

我正在使用.tabs来执行ui.js和ui-tabs.js，但它添加了许多不受欢迎的js代码，使用自定义函数可能更容易实现，但我有点难以理解如何最好地进行基于计时器的循环。使用.tabs（），它基本上模拟了一个点击以显示内容，但为什么不循环浏览内容选项卡，同时使用addClass('clicked');设置相关的li类来显示当前正在显示的内容。

总结一下，我需要函数来执行以下伪代码：

正在加载
FadeIn <div id=tab1">和addClass（“clicked”）;到<li title="#tab1">
FadeOut <div id=tab1">并删除课程<li title="#tab1">
FadeIn <div id=tab2">和addClass（“clicked”）;到<li title="#tab2">
FadeOut <div id=tab2">并删除课程<li title="#tab2">
FadeIn <div id=tab3">和addClass（“clicked”）;到<li title="#tab3">
FadeOut <div id=tab3">并删除课程<li title="#tab3">
返回第2步

如果点击任何ul li，则停止运行该功能。

Answer 1

也许是这样的？

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

jQuery循环通过li旋转而不使用.tabs

1 个答案: