自从自己搭了个微博后就在捣鼓着这个公告栏的轮换效果了，之前一直比较中意阿邙的那个轮换效果，无奈我对他的js代码有点生疏，不能很好的移植，然后就像凭借着自己对jQuery的仅有的一点知识自己折腾一些代码出来，最终宣告失败！o(╯□╰)o不过天无绝人之路，无意间逛网站发现了一串很有用的代码，刚好是我需要的轮换效果，毫不客气得拿来用了~下面分享下我的公告栏代码。

公告栏基本结构

<div class="location">//自行修改
<ul>
<li>内容1</li>
<li>内容2</li>
<li>...</li>
</ul>
</div>

基本并必须的css代码

.location{height:25px;line-height:25px;overflow:hidden}//25请自行修改为合适数值
.location ul li{overflow:hidden;height:25px}

核心的js轮换代码

function AutoScroll(obj){
    $(obj).find("ul:first").animate({
    marginTop:"-25px"//和上面的height一致
    },800,function(){
        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
    });
}
$(function(){
    $t=setInterval('AutoScroll(".location")',5000)//轮换间隔，单位毫秒，下同
    $(".location").hover(function(){clearInterval($t);},function(){$t=setInterval('AutoScroll(".location")',5000);});
})

解释下代码的用处：AutoScrol(obj)为轮换核心代码，下面的jQuery每隔5秒执行一次轮换代码，即翻滚一条公告，鼠标放在这个div上时停止轮换，鼠标移开后继续执行轮换代码，是不是蛮实用的呢？

至此，基本上公告栏的轮换效果已经大功告成了，演示就见我的公告栏就ok了，在日志上方就有~最后就剩下内容和一些后续美化的css代码等着你来写了~更新完毕，静静地等待沙发...