实现三位轮播图--半成品

效果：

<link rel="stylesheet" href="./css/default.css">
<!--引包，引入JQ-->
<script src="js/jquery.min.js"></script>

default.css

*{
margin: 0;
padding: 0;
}
div{
position: relative;
width: 600px;
height: 400px;
border: 1px solid black;
margin: 50px auto;
overflow: hidden;
}

ul{
position: absolute;
width: 600px;
height: 400px;
list-style: none;
}

img{
width: 600px;
height: 400px;
}

ul li{
position: absolute;
width: 600px;
height: 400px;
left: 600px;
}

.current{
left: 0px;
}

.l_btn{
position: absolute;
width: 35px;
height: 35px;
left: 0px;
top: 40%;

}

.r_btn{
position: absolute;
width: 35px;
height: 35px;
left: 565px;
top: 40%;
}

ol{
position: absolute;
width: 150px;
height: 25px;
/background: red;/
left: 38%;
bottom: 5px;
list-style: none;
}

ol li{
float: left;
width: 25px;
height: 25px;
background: black;
border-radius: 50%;
color: white;
text-align: center;
line-height: 25px;
margin-left: 3px;
}

.cur{
background-color: green;
transform: scale(1.2);
}