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');
}