style.css

<style>
.tabbox{width:500px;height:140px;margin:100px auto;background:#f0f0f0;font-family:'微软雅黑';}
.tabbox .tab{overflow:hidden;background:#ccc;}
.tabbox .tab a{display:block;padding:10px 20px;float:left;text-decoration:none;color:#333;}
.tabbox .tab a:hover{background:#E64E3F;color:#fff;text-decoration:none;}
.tabbox .tab a.on{background:#E64E3F;color:#fff;text-decoration:none;}
.tabbox .content{overflow:hidden;width:500px;height:100px;position:relative;}
.tabbox .content ul{position:absolute;left:0;top:0;height:100px;}
.tabbox .content li{width:500px;height:100px;float:left;}
.tabbox .content li p{padding:10px;}
</style>

html.html

<div class="tabbox">
<div class="tab">
<a href="javascript:;" class="on">tab1</a>
<a href="javascript:;">tab2</a>
<a href="javascript:;">tab3</a>
<a href="javascript:;">tab4</a>
</div>
<div class="content">
<ul>
<li><p>tab1内容1</p></li>
<li><p>tab1内容2</p></li>
<li><p>tab1内容3</p></li>
<li><p>tab1内容4</p></li>
</ul>
</div>
</div>

js.js

<script>
$(function(){
$('.tabbox .content ul').width(500*$('.tabbox .content li').length+'px');
$(".tabbox .tab a").mouseover(function(){
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index();
number = index;
var distance = -500*index;
$('.tabbox .content ul').stop().animate({
left:distance
});
});
var auto = 1;  //等于1则自动切换，其他任意数字则不自动切换
if(auto ==1){
var number = 0;
var maxNumber = $('.tabbox .tab a').length;
function autotab(){
number++;
number == maxNumber? number = 0 : number;
$('.tabbox .tab a:eq('+number+')').addClass('on').siblings().removeClass('on');
var distance = -500*number;
$('.tabbox .content ul').stop().animate({
left:distance
});
}
var tabChange = setInterval(autotab,3000);
//鼠标悬停暂停切换
$('.tabbox').mouseover(function(){
clearInterval(tabChange);
});
$('.tabbox').mouseout(function(){
tabChange = setInterval(autotab,3000);
});
  }  
});
</script>