请js大神帮忙看下这段jquery选项卡怎么实现定时多少秒自动切换

发布网友发布时间：2022-04-23 11:38

共1个回答

热心网友时间：2022-04-23 13:07

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
.current {
background-color: red;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (document).ready (function ()
    {
    var tab = $ ("ul#tab"), content = $ ("div#content"), tls = tab.children ("li");

    $("div#outer").hover (function ()
    {
    stop ();
    }, function ()
    {
    run (tls);
    });

    tls.click (function ()
    {
    var me = $ (this);
    me.addClass ("current").siblings ("li").removeClass ("current");
    content.children ("ul:eq(" + me.index () + ")").show ().siblings ("ul").hide ();
    });
    content.children ("ul:not(:eq(" + tls.filter ("li.current").index () + "))").hide ();
    run (tls);
    });

    var INTERVAL = null, SLEEP = 1000;
    var run = function (tls)
    {
    if (!INTERVAL)
    {
    INTERVAL = setInterval (function ()
    {
    var index = tls.filter ("li.current").index ();
    index++;
    index = index > tls.length - 1 ? 0 : index;
    tls.filter ("li:eq(" + index + ")").triggerHandler ("click");
    }, SLEEP);
    }
    };

    var stop = function ()
    {
    if (!!INTERVAL)
    {
    clearInterval (INTERVAL);
    INTERVAL = null;
    }
    }
</script>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">科技</li>
<li>旅游</li>
<li>娱乐</li>
</ul>
<div id="content">
<ul style="display: block;">
<li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li>
</ul>
<ul>
<li>爱上西雅图，美国全景游精选推荐</li>
</ul>
<ul>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
</ul>
</div>
</div>
</body>
</html>

请js大神帮忙看下 这段jquery选项卡 怎么实现定时多少秒自动切换

请js大神帮忙看下这段jquery选项卡怎么实现定时多少秒自动切换