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" /></li>
</ul>
<ol>
<li title="上一张"></li>
<li title="下一张"></li>
</ol>
</div>

原图:

css 绝对定位实现一个轮播效果,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。