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

寫完了但這圖并沒有什么用拿來做焦點(diǎn)切換效果不好看

<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
<title>Document</title>
<style>
??*{margin:0;
????padding:0;
????list-style:none;}
??.wrap{height:170px;
????????width:490px;
????????margin:60px?auto;
????????overflow:?hidden;
????????position:?relative;
????????margin:100px?auto;}
??.wrap?ul{position:absolute;}?
??.wrap?ul?li{height:170px;}
??.wrap?ol{position:absolute;
???????????right:5px;
???????????bottom:10px;?z-index:2;}
??.wrap?ol?li{height:20px;?width:?20px;
??????????????background:#ccc;
??????????????border:solid?1px?#666;
??????????????margin-left:5px;
??????????????color:#000;
??????????????float:left;
??????????????line-height:center;
??????????????text-align:center;
??????????????cursor:pointer;}
??.wrap?ol?.on{background:#E97305;
???????????????color:#fff;}

??</style>
??<script?type="text/javascript">
??window.onload=function(){
????var?wrap=document.getElementById('wrap'),
????????pic=document.getElementById('pic'),
????????picLi=pic.getElementsByTagName("li");
????????//alert(picLi.length);
????????var?list=document.getElementById('list').getElementsByTagName('li'),
????????index=0,
????????timer=null;
????????autoPlay();
????????function?fn(obj){
????????for?(var?i?=?0;?i?<?picLi.length;?i++)?{
????????picLi[i].style.cssText="display:none";
????????list[i].style.cssText="background:#ccc;color:#000;";
????????};
????????????picLi[obj].style.cssText="display:block";
????????????list[obj].style.cssText="background:#e97305;color:#fff;";????????
????????}
???????function?autoPlay(){
????????clearInterval(timer);
????????timer=setInterval(function(){
????????index++;
????????if?(index>=5)?{
????????index=0;
????????};
????????fn(index);
?????},500)
???}
???for?(var?i?=?0;?i?<?list.length;?i++){
????list[i].id=i;
????list[i].onmouseover=function(){
????var?_this=this;
???
????var?cao=_this.id;
????clearInterval(timer);
????fn(cao);
????}
????list[i].onmouseout=function(){
????var?_this=this;
?????autoPlay();
?????index=_this.id;
????}
???};
???for?(var?i?=?0;?i?<?picLi.length;?i++)?{
????picLi[i].onmouseover=function(){
????clearInterval(timer);
????}
????picLi[i].onmouseout=function(){
????autoPlay();
????}
???};
}
??</script>
</head>
<body>
??<div?id='wrap'>
????<ul?id="pic">
??????<li?><img?src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg"?alt=""></li>
??????<li?style="display:none"><img?src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg"?alt=""></li>
??????<li?style="display:none"><img?src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg"?alt=""></li>
??????<li?style="display:none"><img?src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg"?alt=""></li>
??????<li?style="display:none"><img?src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg"?alt=""></li>????
????</ul>
????<ol?id="list">
??????<li>1</li>
??????<li>2</li>
??????<li>3</li>
??????<li>4</li>
??????<li>5</li>
????</ol>
??</div>
</body>
</html>