css代码:
/* 整个轮播图 */
.banner{
width: 520px;
height: 280px;
overflow: hidden;
margin:10% auto;
position: relative;
}
/* 图片部分 */
/* ul */
.banner-img{
/* 宽度其实是不符合条件的,需要使用js去控制 */
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.banner-img li{
width: 520px;
height: 100%;
float: left;
}
.banner-img li a{
width: 100%;
height: 100%;
}
.banner-img li a img{
width: 100%;
height: 100%;
}
/* 实现按钮 */
.banner .banner-btn{
position: absolute;
height:40px;
width: 100%;
/* background: red; */
top: 50%;
margin-top: -20px;
display: none;
}
/* 鼠标移入显示 */
.banner:hover .banner-btn{
display: block;
}
.banner .banner-btn a{
display: block;
width: 40px;
height: 40px;
background: green;
overflow: hidden;
}
.banner .banner-btn .nexBtn{
float: right;
}
.banner .banner-btn a{
background-color: #000;
opacity: 0.3;
filter: alpha(opcity=30);
border-radius: 5px;
}
.banner .banner-btn i{
margin-top: 8px;
display: block;
width: 100%;
height: 24px;
/* 使用一下精灵图,面包屑图 */
background: url(http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png);
}
/* 左边的 */
.banner .prevBtn i{
background-position: -190px 0;
}
/* 右边的 */
.banner .nexBtn i{
background-position: -190px -24px;
}
/* 下面的小圆圈 */
.banner-circle{
position: absolute;
left:50%;
/* margin-left: ; */
height:13px ;
bottom: 5px;
border-radius:10px;
/* opacity: