html代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>animate scroll</title> 6 <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> 7 <style type="text/css"> 8 body{background-color: #f3f3f3;} 9 .center{margin: 0 auto;} 10 .inline-block{display: inline-block;} 11 #banner{width: 800px;height: 200px;margin-top: 40px;border: 1px solid #fff;overflow: hidden;} 12 #container{height: 100%;width: 300%;} 13 #banner img{width: 200px;height: 100%;display: block;float: left;} 14 </style> 15 16 </head> 17 <body> 18 <div id="banner" class="center"> 19 <div id="container"> 20 <img src="images/1.jpg"/> 21 <img src="images/2.jpg"/> 22 <img src="images/3.jpg"/> 23 <img src="images/4.jpg"/> 24 <img src="images/5.jpg"/> 25 <img src="images/6.jpg"/> 26 <img src="images/1.jpg"/> 27 <img src="images/2.jpg"/> 28 <img src="images/3.jpg"/> 29 <img src="images/4.jpg"/> 30 <div class="clear"></div> 31 </div> 32 </div> 33 </body> 34 </html>
js代码：
1 <script type="text/javascript"> 2 var i=1; 3 $(function(){ 4 setInterval(autoScroll,2000); 5 }); 6 7 function autoScroll(){ 8 $("#container").animate({ 9 "margin-left":"-"+200*i+"px" 10 },1000,isScroll); 11 } 12 function isScroll(){ 13 var _marginLeft = $("#container").css("margin-left"); 14 var _lenth = $("#container img").length-4; 15 if(_marginLeft=='-'+(200*_lenth)+'px'){ 16 $("#container").css("margin-left","0"); 17 i=1; 18 }else{ 19 i++; 20 } 21 } 22 </script>