效果如下:
代码如下:
/ flexslider /
.flexslider {
height: 180px;
position: relative;
background: #f5f5f5;
overflow: hidden;
}
.flex-viewport {
height: 100%;
}
.slides {
height: 100%;
position: relative;
z-index: 1;
}
.slides li {
height: 100%;
}
.slides li a {
display: block;
height: 100%;
position: relative;
}
.flexslider li img {
display: block;
width: 100%;
height: 100%;
display: none;
}
.flex-control-nav {
text-align: center;
padding: 0 5px;
position: absolute;
right: 0;
bottom: 3px;
z-index: 2;
}
.flex-control-nav li {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 3px;
}
.flex-control-nav a {
display: block;
height: 100%;
line-height: 40px;
overflow: hidden;
border: 1px solid #fff;
border-radius: 55%;
}
.flex-control-nav .flex-active {
background: #fff;
}
.flexslider .ps1 {
width: 100%;
height: 25px;
color: #fff;
background: rgba(0,.5);
padding: 0 50px 0 10px;
font: 14px/27px Microsoft YaHei;
text-align: left;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
position: absolute;
bottom: 0;
left: 0;
}