JS滚轮公告，自己滚轮

首先我们可以看到下面的列表

		<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)
        });

这样我们就可以看到滚动的公告重复显示啦