1.首先引入JQuery基本类库和控制文本上下移动的插件，下载见附件
<script type="text/javascript" src="js/jQuery-1.4.2.js"></script>
<script type="text/javascript" src="js/jQuery.textSlider.js"></script>
1.样式控制
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{overflow:auto}
.scrollText{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid; float:left;overflow:hidden}
.scrollText li{height:25px;padding-left:10px;}
.up{ margin-left:310px; width:50px;height:50px;background:#F90}
.down{ margin:0 0 0 310px; zoom:1; width:50px; height:50px;background:#960}
</style>

3.滚动内容结构
<p>一行滚动演示：</p>
<div id="scrollDiv">
<div class="scrollText">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
<li>这是公告标题的第9行</li>
<li>这是公告标题的第10行</li>
<li>这是公告标题的第11行</li>
<li>这是公告标题的第12行</li>
</ul>
</div>
</div>
<p>多行滚动演示：</p>
<div id="scrollDiv2">
<div class="scrollText">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
<li>这是公告标题的第9行</li>
<li>这是公告标题的第10行</li>
<li>这是公告标题的第11行</li>
<li>这是公告标题的第12行</li>
</ul>
</div>
</div>
4.控制滚动内容
<script type="text/javascript">
$(document).ready(function(){
// line 控制滚动的行数，speed 控制滚动的速度，timer控制间隔时间毫秒
$("#scrollDiv").textSlider({line:1,speed:500,timer:3000});
$("#scrollDiv2").textSlider({line:4,speed:500,timer:3000});
});
</script>

了解更多，请移步路人甲技术交流http://www.walkerjava.com