一开始想着要自己写，从哪里开头呢？
找插件吧。
呃，还是自己写吧。
要不还是找个插件吧，我找啊找啊找啊找。不合适吶。。。
终于看到个源码，还是自己写吧。
超级简单的，思路为：
1. 只需把公告整体先向上滑动以遮住第一条；
2. 滑动结束后，恢复原来现状，把第一个元素放于最后一个元素之后
反之向上滚动
JavaScript Code
var scrollNoticeNext = function () {
var $notice = $(“#notice”),
$first = $notice.find(“li:first”);
$notice.animate({
marginTop: “-“ + $first.height() + “px”
},500,function(){
$notice.css({
marginTop: “0px”
});
$first.appendTo($notice);
});
};
var scrollNoticePre = function () {
var $notice = $(“#notice”),
$last = $notice.find(“li:last”);
$last.prependTo($notice);
$notice.css(“marginTop”, “-“ + $last.height() + “px”);
$notice.animate({
marginTop: 0
},500);
};
(function () {
var timerID = window.setInterval(scrollNoticeNext, 2000);
$(“#notice”).hover(function () {
window.clearInterval(timerID);
}, function () {
timerID = window.setInterval(scrollNoticeNext, 2000);
});
})();
HTML Code
<button onclick=”scrollNoticeNext()”>Next</button>
<button onclick=”scrollNoticePre()”>Pre</button>
<div style=”height: 38px; overflow: hidden;”>
<ul id=”notice”>
<li>
111111111111111111
</li>
<li>
222222222222222222222
</li>
<li>
3333333333333333333333
</li>
<li>
4444444444444444
</li>
<li>
5555555555555555
</li>
</ul>
</div>