代码如下：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>图片自动滚动</title>
6 <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
7 <script type="text/javascript" >
8 $(function() {
9 var speed = 20;
10 var box = $("#box");
11 var list01 = $("#list01");
12 var list02 = $("#list02");
13
14 list02.html(list01.html());
15
16 //向左滚动
17 function marqueeLeft() {
18 if(box.scrollLeft()>=list01.width()) {
19 box.scrollLeft(0);
20 }else {
21 box.scrollLeft(box.scrollLeft()+1);
22 }
23 }
24
25 //向右滚动
26 function marqueeRight() {
27 if(box.scrollLeft()==0) {
28 box.scrollLeft(list01.width());
29 }else {
30 box.scrollLeft(box.scrollLeft()-1);
31 }
32 }
33
34 var moving = setInterval(marqueeRight,speed);
35
36 box.hover(function() {
37 clearInterval(moving);
38 },function() {
39 moving = setInterval(marqueeRight,speed);
40 });
41 });
42
43 </script>
44 </head>
45
46 <body>
47 <style>
48 div, h2, p, ul, li {
49 margin:0;
50 padding:0;
51 list-style: none;
52 }
53
54 #box {
55 margin: 0 15px;
56 border: 1px solid #ccc;
57 float:left;
58 width: 400px;
59 overflow: hidden;
60 }
61
62 .subBox {
63 width: 100000px;
64 }
65
66 #list01,
67 #list02 {
68 float: left;
69 }
70
71 ul li {
72 float: left;
73 }
74
75 </style>
76 <div id="box">
77 <div class="subBox">
78 <ul id="list01">
79 <li><img src="safari_100.png"></li>
80 <li><img src="safari_100.png"></li>
81 <li><img src="safari_100.png"></li>
82 <li><img src="safari_100.png"></li>
83 </ul>
84 <ul id="list02">
85 </ul>
86 </div>
87 </div>
88 </body>
89 </html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>图片自动滚动</title>
6 <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
7 <script type="text/javascript" >
8 $(function() {
9 var speed = 20;
10 var box = $("#box");
11 var list01 = $("#list01");
12 var list02 = $("#list02");
13
14 list02.html(list01.html());
15
16 //向左滚动
17 function marqueeLeft() {
18 if(box.scrollLeft()>=list01.width()) {
19 box.scrollLeft(0);
20 }else {
21 box.scrollLeft(box.scrollLeft()+1);
22 }
23 }
24
25 //向右滚动
26 function marqueeRight() {
27 if(box.scrollLeft()==0) {
28 box.scrollLeft(list01.width());
29 }else {
30 box.scrollLeft(box.scrollLeft()-1);
31 }
32 }
33
34 var moving = setInterval(marqueeRight,speed);
35
36 box.hover(function() {
37 clearInterval(moving);
38 },function() {
39 moving = setInterval(marqueeRight,speed);
40 });
41 });
42
43 </script>
44 </head>
45
46 <body>
47 <style>
48 div, h2, p, ul, li {
49 margin:0;
50 padding:0;
51 list-style: none;
52 }
53
54 #box {
55 margin: 0 15px;
56 border: 1px solid #ccc;
57 float:left;
58 width: 400px;
59 overflow: hidden;
60 }
61
62 .subBox {
63 width: 100000px;
64 }
65
66 #list01,
67 #list02 {
68 float: left;
69 }
70
71 ul li {
72 float: left;
73 }
74
75 </style>
76 <div id="box">
77 <div class="subBox">
78 <ul id="list01">
79 <li><img src="safari_100.png"></li>
80 <li><img src="safari_100.png"></li>
81 <li><img src="safari_100.png"></li>
82 <li><img src="safari_100.png"></li>
83 </ul>
84 <ul id="list02">
85 </ul>
86 </div>
87 </div>
88 </body>
89 </html>