如何实现TAB自动切换（setTimeout）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现TAB自动切换（setTimeout）相关的知识，希望对你有一定的参考价值。
假设有三个TAB，分别对应三个内容框，当鼠标点击或者滑动过某个TAB时，相应的内容框就切换出来。如果是手动来切换（即手动点击鼠标或滑动鼠标）是挺容易做的，但我现在想让他们每隔一段时间（假设是1000毫秒）来切换一次，请问怎么实现？谢谢大家！注：我知道是用setTimeout()和clearTimeout()来实现，但具体怎么来实现还有点模糊。
已搞定！html代码如下： First tab Second tab Third tab First content box Second content box Third content box CSS代码如下：* margin: 0; padding: 0;body font-family: arial, "宋体"; font-size: 14px; color: #555; line-height: 1.6em; text-align: center; background-color: white;ul, ol list-style-type: none;#wrapper width: 980px; margin: 20px auto 0px; text-align: left;.tabs_box width: 400px; height: 330px; overflow: hidden;.tabs_box ul width: 400px; height: 30px; border-left: 1px solid gray; margin-bottom: -1px; position: relative;.tabs_box li width: 90px; height: 28px; line-height: 28px; border: 1px solid gray; border-left: 0 none; float: left; text-align: center; cursor: pointer;.tabs_box li.current color: red; border-bottom-color: white;.tabs_box div width: 398px; height: 299px; border: 1px solid gray;.tabs_box div p margin-top: 20px;jquery代码如下：$(document).ready(function() $(\'.tabs_box li:first\').addClass(\'current\'); $(\'.tabs_box div:gt(0)\').hide(); var $index = 0; var $len = $(\'.tabs_box li\').length; $(\'.tabs_box li\').mousemove(function() $index = $(this).index(); $(\'.tabs_box li\').removeClass(\'current\'); $(this).addClass(\'current\'); $(\'.tabs_box div\').hide(); $(\'.tabs_box div:eq(\' + $index + \')\').show(); ); function change() if($index == $len-1 || $index > $len-1) $index = 0; else $index += 1; $(\'.tabs_box li\').removeClass(\'current\'); $(\'.tabs_box li:eq(\' + $index + \')\').addClass(\'current\'); $(\'.tabs_box div\').hide(); $(\'.tabs_box div:eq(\' + $index + \')\').show(); var srart = setInterval(change, 1500);); 参考技术A 不错，很厉害，如果能加上鼠标悬停动画就停止就完美了$(function() $("li:first").addClass('current'); var index = 0; $("ul > li").click(function() index = $(this).index(); $(this).addClass("current").siblings().removeClass(); $(".tabs_box div").eq(index).show().siblings().filter("div").hide(); ) function change() index<2 ? index++ : index=0; $("ul > li").eq(index).addClass("current").siblings().removeClass(); $(".tabs_box div").eq(index).show().siblings().filter("div").hide(); var x = setInterval(change,1000); $(".tabs_box").hover(function() clearInterval(x); ,function() x = setInterval(change,1000); ); ) 参考技术B 我也想知道怎么做出来的，请高手支招啊！谢谢！！！Tab选项卡 自动切换效果js实现
try.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="try.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="notice" class="notice">
<div class="notice-tit" id="notice-tit">
<ul>
<li><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li class="select"><a href="#">公益</a></li>
</ul>
</div>
<div id="notice-con" class="notice-con">
<div class="mod" style="display: none;">
<ul>
<li><a href="#">张勇：玩快乐足球</a></li>
<li><a href="#">张勇：玩快乐足球</a></li>
<li><a href="#">张勇：玩快乐足球</a></li>
<li><a href="#">张勇：玩快乐足球</a></li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li><a href="#">张勇：要玩快乐</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
</ul>
</div>
<div class="mod" style="display: block;">
<ul>
<li><a href="#">张勇：要玩快乐</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">张勇：要玩快乐</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
try.css
*{
margin: 0;
padding:0;
list-style: none;
font-size: 12px;
}
.notice{
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.notice-tit{
height: 27px;
position: relative;
background-color: #f7f7f7;
}
.notice-tit ul{
position: absolute;
width: 301px;
left: -1px;
}
.notice-tit ul li{
float: left;
width: 58px;
height: 26px;
text-align: center;
line-height: 26px;
overflow: hidden;
padding: 0 1px;
background: #f7f7f7;
border-bottom: 1px solid #eee;
}
.notice-tit ul li.select{
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 0;
font-weight: bolder;
}
.notice li a:link,.notice-tit li a:visited{
text-decoration: none;
color: #000;
}
.notice li a:hover{
color: #f90;
}
.notice-con .mod{
margin: 10px 10px 10px 19px;
}
.notice-con .mod ul li{
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
script.js
function $(id){
return typeof id===\'string\'?document.getElementById(id):id;
}
window.onload=tab;
function tab(){
var index=0;
var timer=null;
var lis=$(\'notice-tit\').getElementsByTagName(\'li\');
var divs=$(\'notice-con\').getElementsByTagName(\'div\');
for(var i=0;i<lis.length;i++){
lis[i].id=i;
lis[i].onmouseover=function(){
clearInterval(timer);
changeOption(this.id);
}
lis[i].onmouseout=function(){
timer=setInterval(autoPlay,2000);
}
}
if(timer){
clearInterval(timer);
timer=null;
}
// ��Ӷ�ʱ�����ı䵱ǰ����������
timer=setInterval(autoPlay,2000);
function autoPlay(){
index++;
if(index>=lis.length){
index=0;
}
changeOption(index);
}
function changeOption(curIndex){
for(var j=0;j<lis.length;j++){
lis[j].className=\'\';
divs[j].style.display=\'none\';
}
lis[curIndex].className=\'select\';
divs[curIndex].style.display=\'block\';
index=curIndex;
}
}
效果：
2017-09-05 20:45:21
以上是关于如何实现TAB自动切换（setTimeout）的主要内容，如果未能解决你的问题，请参考以下文章
JQUERY的TAB标签，我想实现5秒钟自动切换的效果，怎么做