                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /Tab選項(xiàng)卡切換效果

選項(xiàng)卡自動(dòng)切換，代碼還未優(yōu)化，但是當(dāng)鼠標(biāo)劃過(guò)時(shí)圖片內(nèi)容就是空白的，請(qǐng)大神幫我看看代碼，不知道哪里出問(wèn)題了

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>SQL的小站首頁(yè)</title>
????<script?type="text/javascript">
????????/*window.onload=function?()?{
????????????var?timer=null;
????????????var?a=document.getElementById("tip_list").getElementsByTagName("a");
????????????var?img=document.getElementById("banner_pic").getElementsByTagName("img");
????????????if(a.length!=img.length)?return;
????????????for(var?i=0;i<a.length;i++){
????????????????a[i].aa=i;
????????????????a[i].onmouseover=function?()?{
????????????????????var?that=this;
????????????????????if(timer){clearTimeout(timer);
????????????????????timer=null;}
????????????????????timer=setTimeout(function?()?{
????????????????????????for(var?k=0;k<a.length;k++){
????????????????????????????a[k].className="";
????????????????????????????img[k].style.display="none";
????????????????????????}
????????????????????????that.className="selected";
????????????????????????img[that.aa].style.display="block";
????????????????????},1000)
????????????????}
????????????}

????????}
????????*/
????????window.onload=function?()?{
????????????//?當(dāng)前高亮顯示的頁(yè)簽的索引
????????????var?index?=?0;
????????????var?timer?=?null;
????????????//?獲取所有的頁(yè)簽和要切換的內(nèi)容
????????????var?a?=?document.getElementById("tip_list").getElementsByTagName("a");
????????????var?img?=?document.getElementById("banner_pic").getElementsByTagName("img");
????????????//?遍歷每一個(gè)頁(yè)簽且給他們綁定事件
????????????for?(var?i?=?0;?i?<?a.length;?i++)?{
????????????????a[i].aa?=?i;
????????????????a[i].onmouseover?=?function?()?{
????????????????????clearInterval(timer);
????????????????????for?(var?j?=?0;?j?<?a.length;?j++)?{
????????????????????????a[j].className?=?"";
????????????????????????img[j].style.display?=?"none";
????????????????????}
????????????????????//?高亮顯示當(dāng)前頁(yè)簽
????????????????????a[this.aa].className?=?"selected";
????????????????????img[this.aa].style.display?=?"blcok";
????????????????};
????????????????a[i].onmouseout?=?function?()?{
????????????????????timer?=?setInterval(function?()?{
????????????????????????index++;
????????????????????????if?(index?>=?a.length)?{
????????????????????????????index?=?0;
????????????????????????}
????????????????????????for?(var?j?=?0;?j?<?a.length;?j++)?{
????????????????????????????a[j].className?=?"";
????????????????????????????img[j].style.display?=?"none";
????????????????????????}
????????????????????????a[index].className?=?"selected";
????????????????????????img[index].style.display?=?"block";
????????????????????},?2000);

????????????????}

????????????}
????????????if?(timer)?{
????????????????clearInterval(timer);
????????????????timer?=?null;
????????????}
????????????timer?=?setInterval(function?()?{
????????????????index++;
????????????????if?(index?>=?a.length)?{
????????????????????index?=?0;
????????????????}
????????????????for?(var?j?=?0;?j?<?a.length;?j++)?{
????????????????????a[j].className?=?"";
????????????????????img[j].style.display?=?"none";
????????????????}
????????????????a[index].className?=?"selected";
????????????????img[index].style.display?=?"block";
????????????},?2000);

????????}
????</script>
????<style?type="text/css">
????????*{margin:0;
????????????padding:0;
????????}
????????#banner{
????????????position:?relative;
????????????height:?560px;
????????????width:?1344px;
????????????overflow:?hidden;
????????}
????????#banner_pic?img{
????????????width:100%;

????????}
????????#banner_pic?img{
????????????display:?none;
????????}
????????#tip_list{
????????????position:?absolute;
????????????top:?510px;
????????????left:50%;
????????????width:?200px;
????????????margin-left:?-100px;
????????????text-align:?center;
????????}
????????#tip_list?a:link,#tip_list?a:visited{
????????????color:?white;
????????????margin:0?10px;
????????}
????????#tip_list?a:hover{
????????????color:red;
????????}
????????#tip_list?.selected{
????????????background-color:?aqua;
????????}

????</style>
</head>
<body>

????<div?id="banner_box">
????????<div?id="banner">
????????????<ul?id="banner_pic">
????????????????<li><a?href="#"><img?style="display:block"?src="images/001.png"?alt="無(wú)"></a></li>
????????????????<li><a?href="#"><img?src="images/2.png"?alt="無(wú)"></a></li>
????????????????<li><a?href="#"><img?src="images/003.png"?alt="無(wú)"></a></li>
????????????</ul>
????????????<div?id="tip_list">
????????????????<a?href="#"?class="selected">1</a>
????????????????<a?href="#">2</a>
????????????????<a?href="#">3</a>
????????????</div>
????????</div>
????</div>

</body>
</html>