<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
</head>
<style>
.box{
width:520px;
height:280px;
margin:100px auto;
overflow:hidden;
position:relative;
}
ul,ol{
list-style:none;
padding:0;
margin:0;
}
.box>a{
position:absolute;
width:24px;
height:36px;
top:50%;
margin-top:-18px;
display:none;
}
.left{
left:0;
}
.right{
right:0;
}
ol{
width:60px;
height:20px;
position:absolute;
lefT:50%;
margin-left:-30px;
bottom:10px;
background:rgba(255,255,255,0.5);
border-radius:10px;
}
ol li{
width:10px;
height:10px;
background:#fff;
border-radius:50%;
float:left;
margin-top:5px;
margin-left:5px;
margin-right:5px;
}
.box:hover>a{
display:block;
}
</style>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner2.jpg"></a></li>
<li><a href="#"><img src="images/banner3.jpg"></a></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<a href="javascript:;" class="left"><img src="images/left.png"></a>
<a href="javascript:;" class="right"><img src="images/right.png"></a>
</div>
</body>
</html>
