<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" >
* {margin:0;padding:0;}
.main{margin:10px auto;500px; line-height:24px;border-left:1px solid #dcdcdc;}
.nav{height:35px;line-height:35px;500px;}
.nav span.active {border-bottom:1px solid #fff;position:relative;}
.nav span{padding:0 10px;float:left;border:1px solid #dcdcdc;border-left:0;cursor:pointer;margin-bottom:-1px;}
.sho{clear:both;500px;border-left:0;border:1px solid #dcdcdc;border-left:0;display:none;height:200px; padding:10px;}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('.nav span:first').addClass('active');
$('.sho:first').css('display','block');
autoroll();
hookThumb();
});
var i=-1; //第i+1个tab开始
var offset = 2500; //轮换时间
var timer = null;
function autoroll(){
n = $('.nav span').length-1;
i++;
if(i > n){
i = 0;
}
slide(i);
timer = window.setTimeout(autoroll, offset);
}
function slide(i){
$('.nav span').eq(i).addClass('active').siblings().removeClass('active');
$('.sho').eq(i).css('display','block').siblings('.sho').css('display','none');
}
function hookThumb(){
$('.nav span').hover(
function () {
if (timer) {
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},
function () {
timer = window.setTimeout(autoroll, offset);
this.blur();
return false;
}
);
}
</script>
</head>
<body>
<div class="main">
<div class="nav">
<span>素材web</span>
<span>网页特效</span>
<span>建站教程</span>
</div>
<div class="sho">133333333333</div>
<div class="sho">222222222222222</div>
<div class="sho">3111111111111111。</div>
</div>
</body>
</html>