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>
效果：
