tab切换-自动、点击、内容变换

<div class="tab">
<ul class="pics">
<li><a href=""><img src="images/pic2.jpg" width="448" height="315" alt="宝业大和工业化住宅制造有限公司第一次董事会顺"/></a></li>
<li><a href=""><img src="images/pic1.jpg" width="448" height="315" alt="111" /></a></li>
<li><a href=""><img src="images/pic3.jpg" width="448" height="315" alt="222"/></a></li>
<li><a href=""><img src="images/pic4.jpg" width="448" height="315" alt="333"/></a></li>
</ul>
<div class="content">宝业大和工业化住宅制造有限公司第一次董事会顺</div>
<ul class="list">
<li style="background:#f00">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

</div>

body {
}
/*基本设置*/

body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
.clear{ clear:both;}
table{border-collapse:collapse;}
td{border:#000 solid 1px;}

.tab {
width:450px;
height:317px;
border:1px solid #CCCCCE;
margin:15px 0 0 10px;
position:relative
}
.pics {
width:448px;
height:315px;
margin:0 auto;
margin-top:1px;
overflow:hidden;
}
.pics li img{
width:448px;
height:315px;
}
.list {
height:17px;
width:96px;
background:#000;
position:absolute;
right:6px;
bottom:6px
}
.list li {
width:23px;
height:17px;
line-height:17px;
font-size:12px;
border-left:1px solid #fff;
color:#fff;
float:left;
cursor:pointer;
text-align:center
}
.list li.cur {
background:#f00
}
.content {
height:25px;
width:443px;
background:#000;
opacity:0.6;
position:absolute;
bottom:1px;
left:1px;
color:#fff;
line-height:25px;
color:#fff;
padding-left:5px;
}

.footer {
height:90px;
width:1003px;
background:url(../images/header.png) no-repeat;
margin:0 auto;
}
.footer p {
line-height:20px;
color:#fff;
font-size:12px;
padding-top:18px;
padding-left:327px
}

//焦点图tab
var t = n = 0, count;
$(document).ready(function () {
$('.list li').each(function (x) {
$(this).click(function () {
count = $(".pics li ").length;
$('.pics li').hide();
$('.pics li').eq(x).fadeIn();
$('.list li').css('background', '');
$('.list li').eq(x).css('background', '#f00');
$(".content").html($(".pics li ").find("img").attr('alt'));
$(".content").html($(".pics li ").eq(x).find("img").attr('alt'));
var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4
n = i;
if (i >= count) return;
})
});
t = setInterval("showAuto()", 3000);

$(".tab").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 3000); });
})
function showAuto() {
n = n >= (count - 1) ? 0 : ++n;
$(".list li").eq(n).trigger('click');
}