jquery 实现横向滑动自动切换源码（同时显示多张图片）

html代码：

 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>animate scroll</title>
  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   body{background-color: #f3f3f3;}
   .center{margin: 0 auto;}
   .inline-block{display: inline-block;}
   #banner{width: 800px;height: 200px;margin-top: 40px;border: 1px solid #fff;overflow: hidden;}
   #container{height: 100%;width: 300%;}
   #banner img{width: 200px;height: 100%;display: block;float: left;}
  </style>

 </head>
 <body>
  <div id="banner" class="center">
   <div id="container">
    <img src="data:images/1.jpg"/>
    <img src="data:images/2.jpg"/>
    <img src="data:images/3.jpg"/>
    <img src="data:images/4.jpg"/>
    <img src="data:images/5.jpg"/>
    <img src="data:images/6.jpg"/>
    <img src="data:images/1.jpg"/>
    <img src="data:images/2.jpg"/>
    <img src="data:images/3.jpg"/>
    <img src="data:images/4.jpg"/>
    <div class="clear"></div>
   </div>
  </div>
 </body>
 </html>

js代码：

  <script type="text/javascript">
   var i=1;
   $(function(){
    setInterval(autoScroll,2000);
   });

   function autoScroll(){
    $("#container").animate({
     "margin-left":"-"+200*i+"px"
    },1000,isScroll);
   }
   function isScroll(){
    var _marginLeft = $("#container").css("margin-left");
    var _lenth = $("#container img").length-4;
    if(_marginLeft=='-'+(200*_lenth)+'px'){
     $("#container").css("margin-left","0");
     i=1;
    }else{
     i++;
    }
   }
  </script>