滚动字

如何实现四组滚动字体交替滚动；
比如
标题一：滚动字
标题二：滚动字
标题三：滚动字
标题四：滚动字
标题一、二、三、四、为固定不动的
滚动字从右到左滚动，标题一的滚动字滚完，标题二的滚，以此类推，当标题一的滚动字滚动时，鼠标移动到除一以外的其他标题的时，标题一停止滚动鼠标当前标题开始滚动，鼠标移开后鼠标当前标题的下一个开始滚动，

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

只实现了滚动<html>
<head>
</head>
<script>
var sp=200;
var int1;
var int2;
var int3;
var int4;
function startint1(){
document.all("s1").style.display="inline";
int1=setInterval(function(){
if(sp>5){
sp-=5;
document.all("s1").style.paddingLeft=(sp+"px");
}else{
document.all("s1").style.display="none";
clearInterval(int1);
sp=200;
startint2();
}
},100);
}
function startint2(){
document.all("s2").style.display="inline";
int2=setInterval(function(){
if(sp>5){
sp-=5;
document.all("s2").style.paddingLeft=(sp+"px");
}else{
document.all("s2").style.display="none";
clearInterval(int2);
sp=200;
startint3();
}
},100);
}
function startint3(){
document.all("s3").style.display="inline";
int3=setInterval(function(){
if(sp>5){
sp-=5;
document.all("s3").style.paddingLeft=(sp+"px");
}else{
document.all("s3").style.display="none";
clearInterval(int3);
sp=200;
startint4();
}
},100);
}
function startint4(){
document.all("s4").style.display="inline";
int4=setInterval(function(){
if(sp>5){
sp-=5;
document.all("s4").style.paddingLeft=(sp+"px");
}else{
document.all("s4").style.display="none";
clearInterval(int4);
sp=200;
startint1();
}
},100);
}
</script>
<body onload="startint1()">
<div/><span>标题一</span><span id="s1" style="padding-left:200px">标题一滚动文字</span></div>
<div/><span>标题二</span><span id="s2" style="padding-left:200px">标题二滚动文字</span></div>
<div/><span>标题三</span><span id="s3" style="padding-left:200px">标题三滚动文字</span></div>
<div/><span>标题四</span><span id="s4" style="padding-left:200px">标题四滚动文字</span></div>
</body>
</html>
<html>
<head>
<script src="http://pic.ofcard.com/themes/common/jquery-1.4.min.js"></script>
  <script>
//全局变量
var index_no = 0; //控制公告上下翻动
var index_isFor = true; //是否循环显示
var index_maxNo = 0; //最大公告div索引
var index_timeout; //setTimeout对象
//首页js对象
var index_Js = function(getNo){
index_maxNo = (getNo%2==0?getNo/2:parseInt(getNo/2)+1)-1;
this.promotion = new promotion();
}
//公告的js
var promotion = function(){
function hide(){
$(".rotate-list-content").css("display","none");
}
function show(no){
$(".rotate-list-content")[no].style.display = "block";
}
this.up = function(){
hide();
index_no = index_no == 0?index_maxNo:index_no-1;
show(index_no);
}
this.down = function(){
hide();
index_no = index_no == index_maxNo?0:index_no+1;
show(index_no);
}
this.forPromotion = function(){
index_timeout = setTimeout("forPro()" ,"6000");
}
}
//循环显示公告
var forPro = function(){
if(index_isFor){
if(index_timeout!=null)clearTimeout(index_timeout);
var pro = new promotion();
pro.down();
pro.forPromotion();
}
}

$(document).ready(function() {
$(".rotate-list-content").css("display","none");
$(".rotate-list-content")[0].style.display = "block";
var indexJs = new index_Js(6);
var promotion = indexJs.promotion;
promotion.forPromotion();
$(".rotate-prev").bind("click",function(){
promotion.up();
});
$(".rotate-next").bind("click",function(){
promotion.down();
});
$(".rotate-list-content,.rotate-prev,.rotate-next").bind("mouseover",function(){
index_isFor = false;
}).bind("mouseout",function(){
index_isFor = true;
promotion.forPromotion();
})
});
  </script>
</head> <body>
<div class="rotate-list">
<div class="rotate-list-content">
<ul>
<li><a href="" class="aleft">ofcard公告栏0</a><a href="#">ofcard公告栏1</a></li>
</ul>
</div>
<div class="rotate-list-content">
<ul>
<li><a href="" class="aleft">ofcard公告栏2</a><a href="#">ofcard公告栏3</a></li>
</ul>
</div>
<div class="rotate-list-content">
<ul>
<li><a href="" class="aleft">ofcard公告栏4</a><a href="#">ofcard公告栏5</a></li>
</ul>
</div>
<a class="rotate-prev" style="cursor:pointer">上一条</a>
<a class="rotate-next" style="cursor:pointer">下一条</a>
</div></html>
把jquery文件导入改一下直接可以用的