<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>JQ 实现滚动公告</title> <script src="jquery-1.10.1.min.js" ></script> <link rel="stylesheet" href="base.css" /> <style> ul{ border: 1px solid #eee; width: 300px; margin: 20px auto 0 auto;} ul li{height: 30px; line-height: 30px;} </style> </head> <body> <ul> <li>我是第1条公告</li> <li>我是第2条公告</li> <li>我是第3条公告</li> <li>我是第4条公告</li> <li>我是第5条公告</li> <li>我是第6条公告</li> <li>我是第7条公告</li> <li>我是第8条公告</li> <li>我是第9条公告</li> <li>我是第10条公告</li> </ul> <script> setInterval(function(){ $('ul').children().first().clone(true).appendTo('ul'); $('ul>:first').remove(); },1000); </script> </body> </html>
效果图: