轮播图自适应

/**html页***/

<div id="slider">
   <ul class="slides clearfix">
      <li><img class="responsive" src="images/bana1.png"></li>
      <li><img class="responsive" src="images/bana2.png"></li>
      <li><img class="responsive" src="images/bana3.png"></li>
      <li><img class="responsive" src="images/bana4.png"></li>
      <li><img class="responsive" src="images/bana5.png"></li>
      <li><img class="responsive" src="images/bana6.png"></li>
   </ul>
   <ul class="controls">
      <li><img src="../lunbo/img/prev.png" alt="previous"></li>
      <li><img src="../lunbo/img/next.png" alt="next"></li>
   </ul>
   <ul class="pagination">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="dist/easySlider.js"></script>
<script type="text/javascript">
       $(function() {
           $("#slider").easySlider( {
               slideSpeed: 500,
               paginationSpacing: "8px",
               paginationDiameter: "6px",
               paginationPositionFromBottom: "20px",
               slidesClass: ".slides",
               controlsClass: ".controls",
               paginationClass: ".pagination"
           });
       });
</script><!--焦点轮播图结束 -->

/******css*****/

/*--------------SLIDER----------------*/

#slider {
   width: 100%;
   margin: 0px auto;
}

ol, ul {
   list-style: none;
}
/*--------------CONTROLS--------------*/

/*position controls*/
.controls li {
   top: 50%;
   margin-top: -30px;
   display:none;
}

.controls li:nth-child(1) {
   left: 0;
}

.controls li:nth-child(2) {
   right: 0;
}


/*------------PAGINATION------------*/

/*style pagination*/
.pagination li {
   background-color: #ddd;
   width: 2px;
   height: 2px;
}

.pagination li.active {
   background-color: #000;
   width: 2px;
   height: 2px;
}


/*-------------HELPERS----------------*/

.responsive {
   width: 100%;
   height: auto;
}

.clearfix:after {
   content: "";
   display: table;
   clear: both;
}