<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>53-图片上下轮播</title>
<style>
{
margin: 0;
padding: 0;
}
#box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 50%;
margin-left: -100px;
margin-top: 100px;
}
#box1 ul{
list-style: none;
width: 200px;
height: 200px;
background-color: blue;
overflow: hidden;
}
#box1 ol{
width: 125px;
height: 30px;
/background-color: green;/
position: absolute;
top: 150px;
right: 10px;
list-style: none;
}
#box1 ol li{
width: 25px;
height: 30px;
text-align: center;
line-height: 30px;
/background-color: #cccccc;/
/opacity: 0.5;/
border: 1px solid #cccccc;
box-sizing: border-box;
float: left;
margin-left: 5px;
}
.active{
background-color: red;
}
</style>
<script>
window.onload=function ()
{
var oBox1=document.getElementById('box1');
var aBtn1=oBox1.getElementsByTagName('ol')[0].getElementsByTagName('li');
var oUl=oBox1.getElementsByTagName('ul')[0];
for(var i=0;i<aBtn1.length;i++)
{
aBtn1[i].index=i;
aBtn1[i].onclick=function ()
{
for(var i=0;i<aBtn1.length;i++)
{
aBtn1[i].className=''
}
this.className='active';
oUl.style.top=-200this.index+'px';
}
}
}
</script>
</head>
<body>
<div id="box1">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ul>
<li><img src="img/a.jpg" alt=""></li>
<li><img src="img/b.jpg" alt=""></li>
<li><img src="img/c.jpg" alt=""></li>
<li><img src="img/d.jpg" alt=""></li>
</ul>
</div>
</body>
</html>