首先我们可以看到下面的列表
<div class="gun">
<h2>公告栏</h2>
<div class="roll" id="roll">
<ul >
<li>第一个结构</li>
<li>第二个结构</li>
<li>第三个结构</li>
<li>第四个结构</li>
<li>第五个结构</li>
<li>第六个结构</li>
<li>第七个结构</li>
<li>第八个结构</li>
<li>第九个结构</li>
<li>第十个结构</li>
</ul>
</div>
</div>
现在我们利用js动画让列表从上到下滚动,到最后一个就接着从一开始,不断循环
$(document).ready(function(){
setInterval(function(){ // 添加定时器,每1.5s进行转换
$("#roll").find("ul:first").animate({
marginTop:"-20px" //每次移动的距离
},500,function(){ // 动画运动的时间
//$(this)指的是ul对象,
//ul复位之后把第一个元素和第二个元素插入
//到ul的最后一个元素的位置
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
},1500)
});