可控制（上一条、下一条、暂停、开始）跑马灯效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跑馬燈</title>
</head>
<body>
<script type="text/javascript" src="http://www.chenfahui.cn/ziliao/js/jquery-1.4.1.min.js"></script>
<style type="text/css">
body {color:#333;font:13px/1.5 verdana,sans-serif,Arial,Helvetica;background:#FAFAFA;}
body,div,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,li,ol,p,table,tr,th,td,form,input,textarea,fieldset{margin:0;padding:0;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline;}
ul,li,ol {list-style:none;}
a {color:#004276;text-decoration:none;cursor:pointer;font-size:13px;}
a:hover {color:#CA0002;}
.clear {clear:both;}
.hotNews {width:481px;margin:0 auto;padding:10px 0;border:1px solid #ccc;padding:0 10px;}
.hotNews .con {float:left;width:400px;height:23px;overflow:hidden;}
.hotNews .con li {height:23px;overflow:hidden;line-height:23px;padding:0 20px 0 0;}
.hotNews .con li a {font-size:15px;}
.hotNews .btn {float:left;width:81px;overflow:hidden;}
.hotNews .btn li {float:left;padding:3px 5px;}
.hotNews .btn a {display:block;height:17px;width:17px;overflow:hidden;background:url(http://www.chenfahui.cn/ziliao/images/hotNews_bg.png) no-repeat;text-indent:-9999px;}
.hotNews a.btnPre:hover {background-position:0 -16px;}
.hotNews a.btnPre:active {background-position:0 -32px;}
.hotNews a.btnNext {background-position:-17px 0;}
.hotNews a.btnNext:hover {background-position:-17px -16px;}
.hotNews a.btnNext:active {background-position:-17px -32px;}
.hotNews a.btnPause {background-position:-34px 0;}
.hotNews a.btnPause:hover {background-position:-34px -16px;}
.hotNews a.btnPause:active {background-position:-34px -32px;}
.hotNews a.btnPlay {background-position:-51px 0;}
.hotNews a.btnPlay:hover {background-position:-51px -16px;}
.hotNews a.btnPlay:active {background-position:-51px -32px;}
.hotNews a.btnFirst {cursor:auto;background-position:0 0;}
.hotNews a.btnLast {cursor:auto;background-position:-17px 0;}
</style>
<script type="text/javascript">
window.onload=ScrollHotNews;
scrollheight = 23 ; //卷軸高
lineNum = 1;
boardheight=scrollheight * lineNum; //跑馬燈高
scrollwidth=810; //跑馬燈寬
scrollTimeOut = 7; //移動時間
scrollStopTime = 500 //停留時間 值愈小停留愈短
doScroll = true //是否要跑
scrollCountTime = 0; //目前時間
offSet = scrollheight; //偏移量
startSetp = 0;
$(document).ready(function(){
$("#marqueeHotNews,.btnFirst,.btnPre,.btnNext,.btnLast").bind('mouseover',function(){
doScroll = false;
}).bind('mouseleave',function(){
if($(".btnPlay").parents("li").css("display") == "none"){doScroll = true;}
});
$(".btnPause").bind('click',function(){
$(this).parents("li").hide();
$(".btnPlay").parents("li").show();
doScroll = false;
})
$(".btnPlay").bind('click',function(){
$(this).parents("li").hide();
$(".btnPause").parents("li").show();
doScroll = true;
})
$(".btnPre").bind('click',function(){
var thisSc=document.getElementById('marqueeHotNews');
thisSc.scrollTop = thisSc.scrollTop - scrollheight;
$(".btnNext").parents("li").show();
$(".btnLast").parents("li").hide();
if(thisSc.scrollTop == 0){
$(".btnPre").parents("li").hide();
$(".btnFirst").parents("li").show();
};
});
$(".btnNext").bind('click',function(){
var thisSc=document.getElementById('marqueeHotNews');
var hotNewsNum=thisSc.getElementsByTagName("li").length;
thisSc.scrollTop = thisSc.scrollTop + scrollheight;
$(".btnPre").parents("li").show();
$(".btnFirst").parents("li").hide();
if(thisSc.scrollTop == (hotNewsNum - 1)*23){
$(".btnNext").parents("li").hide();
$(".btnLast").parents("li").show();
};
});
});
function ScrollHotNews() {
var thisSc=document.getElementById('marqueeHotNews');
thisSc.style.width = scrollwidth+"px";
thisSc.style.height = boardheight+"px";
thisSc.style.overflowX = "hidden";
thisSc.style.overflowY = "hidden";
thisSc.scrollTop = 0
setInterval("scrollUpHotNews()",scrollTimeOut)
}
function scrollUpHotNews() {
var thisSc=document.getElementById('marqueeHotNews');
var hotNewsNum=thisSc.getElementsByTagName("li").length;
if (doScroll == false) return //不跑
offSet ++
if (offSet == scrollheight + 1) {
scrollCountTime ++
offSet --
if (scrollCountTime == scrollStopTime) {
offSet = 0
scrollCountTime = 0
}
}
else {
startSetp = thisSc.scrollTop + (scrollheight * lineNum);
thisSc.scrollTop ++
if(thisSc.scrollTop == 0){
$(".btnPre").parents("li").hide();
$(".btnFirst").parents("li").show();
}else{
$(".btnPre").parents("li").show();
$(".btnFirst").parents("li").hide();
};
if(thisSc.scrollTop == (hotNewsNum - 1)*23){
$(".btnNext").parents("li").hide();
$(".btnLast").parents("li").show();
}else{
$(".btnNext").parents("li").show();
$(".btnLast").parents("li").hide();
};
if (startSetp == thisSc.scrollTop + (scrollheight * lineNum)) {
thisSc.scrollTop = scrollheight * (lineNum-1)
thisSc.scrollTop ++
}
}
}
</script>
<div class="hotNews">
<div class="con">
<ul id="marqueeHotNews"><!-- 列出十篇 -->
<li><a href="javascript:void(0)">1新聞標題新聞標題新聞標題新聞標題1</a></li>
<li><a href="javascript:void(0)">2新聞標題新聞標題新聞標題新聞標題2</a></li>
<li><a href="javascript:void(0)">3新聞標題新聞標題新聞標題新聞標題3</a></li>
<li><a href="javascript:void(0)">4新聞標題新聞標題新聞標題新聞標題4</a></li>
<li><a href="javascript:void(0)">5新聞標題新聞標題新聞標題新聞標題5</a></li>
<li><a href="javascript:void(0)">6新聞標題新聞標題新聞標題新聞標題6</a></li>
<li><a href="javascript:void(0)">7新聞標題新聞標題新聞標題新聞標題7</a></li>
<li><a href="javascript:void(0)">8新聞標題新聞標題新聞標題新聞標題8</a></li>
<li><a href="javascript:void(0)">9新聞標題新聞標題新聞標題新聞標題9</a></li>
<li><a href="javascript:void(0)">10新聞標題新聞標題新聞標題新聞標題10</a></li>
</ul>
</div>
<ul class="btn">
<li><a href="javascript:void(0)" class="btnFirst" title="已是第一條了">已是第一條了</a></li>
<li style="display:none"><a href="javascript:void(0)" class="btnPre" title="上一條">上一條</a></li>
<li><a href="javascript:void(0)" class="btnPause" title="暫停">暫停</a></li>
<li style="display:none"><a href="javascript:void(0)" class="btnPlay" title="播放">播放</a></li>
<li><a href="javascript:void(0)" class="btnNext" title="下一條">下一條</a></li>
<li style="display:none"><a href="javascript:void(0)" class="btnLast" title="已是最後一條了">已是最後一條了</a></li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>