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>
时间： 2024-09-28 18:43:40