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