html：
<div class="slideBox">
<div class="hd">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bd">
<ul>
<li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner1.png" /></a></li>
<li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner1.png" /></a></li>
<li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner2.png" /></a></li>
<li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner2.png" /></a></li>
<li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner3.png" /></a></li>
</ul>
</div>
</div>
css：
.index-box .left .slideBox .hd{
height:15px;
overflow:hidden;
position:absolute;
bottom:5px;
z-index:1;
left: 0;
margin: 0 auto;
width: 100%;
}
.index-box .left .slideBox .hd ul{
text-align: center;
overflow:hidden;
zoom:1;
position: absolute;
width: 100%;
}
.index-box .left .slideBox .hd ul li{
margin:0 2px;
width:11px;
height:11px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background:rgba(255,255,255,.4);
cursor:pointer;
display: inline-block;
}
