JQuery实现滚动公告

最新推荐文章于 2024-09-07 10:16:13 发布

Xiao_Tommy

最新推荐文章于 2024-09-07 10:16:13 发布

阅读量6.9k

点赞数

本文链接：https://blog.csdn.net/xiao_tommy/article/details/53187048

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滚动公告</title>
	    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
	<style>
		*{padding: 0;margin: 0;}
		body{margin: 50px;}
		ul{list-style-type: none;}
		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 :first').css('background', 'red');
		$('ul').children().first().clone(true).appendTo('ul');
		$('ul>:first').remove();
	},1000);
	</script>
</body>
</html>