图片满屏伸展

满屏伸展

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;

}