css 绝对定位实现一个轮播效果

结果：

css:

<style type="text/css">
div, ul, ol {
margin: 0;
padding: 0;
}
.box {
position: relative;
overflow: hidden;
height: 488px;
}
li {
list-style: none;
cursor: pointer;
}
ol {
position: absolute;
left: 50%;
bottom: 0;
margin-left: -412px;
width: 88px;
height: 42px;
}
ol li {
float: left;
width: 44px;
height: 42px;
}
</style>

html:

<div class="box">
<ul>
<li><img src="images/banner_img01.jpg" alt="" /></li>
</ul>
<ol>
<li title="上一张"></li>
<li title="下一张"></li>
</ol>
</div>

原图：