jQuery|jQuery - 轮播图（车厢） -
文章图片
屏幕快照 2018-02-26 下午3.57.23.png
Document - 锐客网 *{
padding:0;
margin:0;
list-style: none;
text-decoration: none;
}
.carousel{
width: 560px;
height: 300px;
margin:50px auto;
position: relative;
/*CSS部分写完之后、加溢出隐藏*/
overflow: hidden;
}
.carousel .unit{
/*宽度必须足够宽*/
width: 9999px;
height:300px;
position: absolute;
left:0px;
top:0;
}
.carousel .unit li{
float: left;
width: 560px;
height: 300px;
}
.carousel .btns a{
width: 30px;
height: 70px;
position: absolute;
top:50%;
margin-top: -30px;
color:#fff;
background-color: rgba(0,0,0,1);
text-align: center;
}
.carousel .btns a.leftBtn{
left:10px;
}
.carousel .btns a.rightBtn{
right:10px;
}
.carousel .circles{
width: 90px;
height:20px;
position: absolute;
left:50%;
margin-left: -45px;
bottom: 30px;
}
.carousel .circles ol li{
float: left;
width: 20px;
height: 20px;
margin: 0px 5px;
background-color: orange;
}
.carousel .circles ol li.cur{
background-color: red;
}
文章图片
文章图片
文章图片
上一页
下一页
