版权声明：版权所有-江西服装学院 https://blog.csdn.net/qq_38263696/article/details/83505972
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0px;padding: 0px;list-style: none;font-family: sans-serif;}
#tabHead>span{
display: inline-block;
padding: 10px;
background-color: #ccc;
cursor: pointer;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
}
#tabHead >span.current{
background-color: #fff;
border-bottom: 1px solid #fff;
}
.tbShow{
padding:10px;
height: 80px;
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<div class="tab-box" style="border: 2px solid gray; width:339px;margin:10px auto;">
<div class="tabHead" id="tabHead">
<span class="current" style="margin-left: -1px;">公司动态</span><span>开学典礼</span><span>学员感言</span><span>学员故事</span>
</div>
<div class="tabBody" id="tabBody" style="font-size:14px;height:100px;width: 340px; overflow: hidden;">
<div class="tbShow" style="display:block">
<ul>
<li>网络营销课程钜惠5000,只剩最后10天</li>
<li>《传智特刊》开年任性大改版,第22期炫酷上线</li>
<li>2014版传智播客php学习路线图霸气上线</li>
<li>IT教师的福音,专教技术干货的大学教材震撼首发</li>
</ul>
</div>
<div class="tbShow">
<ul>
<li>且行且珍惜,退伍兵钟爱传智播客</li>
<li>听听学员讲授传智播客跟其他机构的对比</li>
<li>基础班学员为新学员指点迷津</li>
<li>女汉子背后的故事:试听课上被老师折服</li>
</ul>
</div>
<div class="tbShow">
<ul>
<li>用汗水证明这是传智播客的时代</li>
<li>瓦工的"程序员"梦</li>
<li>iso学习之路,撑起我的成长梦想</li>
<li>催人泪下:一个电力工人转身IT的经历</li>
</ul>
</div>
<div class="tbShow">
<ul>
<li>一个让老程序员都汗颜的应届生</li>
<li>草根学员从求知走向岗位的蜕变故事</li>
<li>我与编程的"爱恨情仇"</li>
<li>狂风暴雨之后才是最灿烂的彩虹</li>
</ul>
</div>
</div>
</div>
</bdy>
</html>
<script type="text/javascript">
var page=1;
var $tbShow=$(".tbShow");
var $span=$("#tabHead>span");
var timer=null;
var key=true;
function changeAuto(){
if(key==false) return ;
$tbShow.filter(":visible").hide();
$span.eq(page-1).addClass("current").siblings().removeClass("current");
$tbShow.eq(page-1).fadeIn(400,function(){
page++;if(page>4) page=1;
clearTimeout(timer);
timer=setTimeout(changeAuto,3000);});
}
changeAuto();
$span.each(function(index){
$(this).hover(function(){
page=index+1;
clearTimeout(timer);
changeAuto();
key=false;
},function(){key=true;clearTimeout(timer);changeAuto()})
});
</script>