轮播图 宽度自适应，可视区域小于1920时，图片水平居中

img100%宽度，最小宽度1920，浏览器可视宽度小于1920时让图片水平居中

涉及的知识点：jq 获得可视区域宽度：$(window).width()，
jq窗口检测事件：$(window).resize(function(){/*要修改的代码*/})
css部分

 *{margin:0;padding:0}
    img{
      vertical-align:middle;
    }
    ul{list-style: none}
    /*banner部分*/
    #slider{
      position:relative;
      width:100%;
      height:590px;/*必须有高度 没有的话直接子元素定位top无效*/
    }
    /*ul宽度*/
    #imgs{
      position:absolute;
      width:400%;
      left:0;
      border: 1px solid #000;
    }
    /*:父元素宽度/li的个数*/
    #imgs li{
      float:left;
      width:25%;
      height:590px;
      position:relative;
      overflow: hidden;
    }
   #imgs li img{
     width:100%;
     min-width:1920px;
     height:590px;
     position:absolute;
     /*小于1920时 图片剧中
      left:-(1920-窗口宽度)/2
     */
   }

HTML部分

<div id="slider">
  <ul id="imgs">
    <li><img src="images/banner_01.jpg" alt=""></li>
    <li><img src="images/banner_02.jpg" alt=""></li>
    <li><img src="images/banner_03.jpg" alt=""></li>
    <li><img src="images/banner_04.jpg" alt=""></li>
  </ul>
</div>

js部分

  //让图片居中显示
    var $imgs=$("#imgs img");
    var imgWidth=$("#imgs img:first").width();
    function reSize(){
      var w=$(window).width();
      var left=-((imgWidth-w)/2);
      if(w<1920){//可视<1920
        $imgs.each(function (i,img) {
          $(this).css({"left":left});
        })
      }
    }
    reSize();
    $(window).resize(function(){
      var w=$(window).width();
      var imgWidth=$("#imgs img:first").width();
      if(w>1920){
        var left=((imgWidth-w)/2);
        $imgs.each(function (i,img) {
          $(this).css({"left":left});
        })
      }
      reSize();
    })