实现公告栏目循环的滚动效果,直接放代码:
<!doctype html>
<!--jq110-->
<html>
</body>
</html>
<head>
<meta charset="utf-8">
<title>tianzi code</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function(){
var x=$("ul>:first").clone(true);
$("ul").append(x);
$("ul>:first").remove();
}, 2000)
})
</script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
margin: 50px;
}
ul{
list-style: none;
}
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>
</body>
</html>
时间: 2024-10-10 22:35:46