图片满屏伸展

满屏伸展

DOM 结构

<div class="banner">

      <ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative;  display: block; z-index: 1; background: url(images/01_02.jpg) center center no-repeat;" class="">

</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1; background: url(images/01_02.jpg) center center no-repeat;" class="">

</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1; background: url(images/01_02.jpg) center center no-repeat;" class="">

</li>
</ul>
            <ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li></ol>

    </div>

CSS 样式

.banner { height:397px; width:100%; position:relative;}
.slides {  position: absolute; left:0px; right:0px; overflow: hidden;}
.slides li { height:397px; cursor: pointer; overflow: visible;}
.slides li a {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    line-height: 30px;
    text-align: center;
    background: url(../images/ban_icohbg.png) no-repeat center center;
    background-size: 12%;
}
.flex-control-nav li {
    display: inline-block;
    width: 20px;
    height: 10px;
    /* margin-right: 5px; */
    zoom: 1;
}
.flex-control-nav a {
    display: inline-block;
    width: 20px;
    height: 10px;
    line-height: 40px;
    overflow: hidden;
    background: url(../images/ban_ico.png) center center no-repeat;
    cursor: pointer;
}