<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>JQ implements rolling announcement</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>I am Announcement 1</li> <li>I am Announcement 2</li> <li>I am Announcement 3</li> <li>I am the 4th announcement</li> <li>I am the 5th announcement</li> <li>I am Bulletin 6</li> <li>I am a Bulletin 7</li> <li>I am the 8th announcement</li> <li>I am the 9th announcement</li> <li>I am the 10th announcement</li> </ul> <script> setInterval(function(){ $('ul').children().first().clone(true).appendTo('ul'); $('ul>:first').remove(); },1000); </script> </body> </html>
Effect picture: