<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选项卡效果</title>
<style>
img{border: none;vertical-align: top}
#box{width:640px;height: 270px;position: relative; }
#box ul{width:640px;height: 270px;position: relative; }
#box ul li{width:640px;height: 270px;position: absolute;list-style-type: none;}
#box ol {position: absolute;right: 50px;bottom: 30px;}
ol li{width: 20px;height: 20px;margin: 3px;float: left;list-style-type: none;background: #fff;color: #f60;text-align: center}
ol .active{background:#f60 ;color:#fff ;}
</style>
</head>
<body>
<div id="box">
<ul >
<li style="display:block"><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script>
var oul=document.getElementsByTagName('ul')[0];
var uli=oul.getElementsByTagName('li');
var ool=document.getElementsByTagName('ol')[0];
var oli=ool.getElementsByTagName('li');
for(var i=0;i<oli.length;i++){
oli[i].index=i;
oli[i].onmouseover=function(){
for(var i=0;i<oli.length;i++){
oli[i].className='';
uli[i].style.display='none'
}
this.className='active';
uli[this.index].style.display='block'
}
}
</script>
</body>
</html>