滚动公告--jq

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>滚动公告</title>
 6         <script src="jquery.min.js"></script>
 7         <style>
 8             *{
 9                 padding: 0;
10                 margin: 0;
11             }
12             body{
13                 margin: 50px;
14             }
15             ul,li{
16                 list-style: none;
17             }
18             li{
19                 height: 30px;
20                 line-height: 30px;
21             }
22         </style>
23     </head>
24     <body>
25         <ul>
26             <li>我是第1条公告............................</li>
27             <li>我是第2条公告............................</li>
28             <li>我是第3条公告............................</li>
29             <li>我是第4条公告............................</li>
30             <li>我是第5条公告............................</li>
31             <li>我是第6条公告............................</li>
32             <li>我是第7条公告............................</li>
33             <li>我是第8条公告............................</li>
34             <li>我是第9条公告............................</li>
35         </ul>
36         
37         <script>
38             $(function(){
39                 setInterval(function(){
40                     var newLi = $('ul>:first').clone(true);
41                     $('ul').append(newLi);
42                     $('ul>:first').remove();
43                 },2000);
44             })
45         </script>
46     </body>
47 </html>
效果：