图片自动滚动

代码如下：

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>