<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css轮播图效果</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ol{
list-style: none;
}
.banager{
margin: 0 auto;
width: 520px;
height: 280px;
/*background: url(img/banager.jpg);*/
position: relative;
}
.next,.prev{
width: 30px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.next{
right: 0;
background: url(img/btn2.jpg);
background-repeat: no-repeat;
}
.prev{
left: 0;
background: url(img/btn1.jpg);
background-repeat: no-repeat;
}
ol{
width: 120px;
height: 30px;
position: absolute;
bottom: 10px;
right: 50%;
margin-right: -60px;
}
ol li{
width: 28px;
height: 30px;
float: left;
background-color: gold;
text-align: center;
line-height: 30px;
border-radius: 50%;
color: black;
}
.curr{
background-color: blue;
}
a{
/**
* 去掉下划线
*/
text-decoration:none;
}
</style>
<body>
<div class="banager">
<a href="#"><img src="img/banager.jpg" title="轮播图"></a>
<span class="prev"></span>
<span class="next"></span>
<ol>
<li class="curr"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ol>
</div>
</body>
</html>
实现效果图: