其实实现文字的跑马灯和实现图片轮播的原理是一样的。
下面是我自己实现的，文字的位置可以随便更改，效果不会变，文字的内容可以通过ajax获取，同时，可以直接用Jquery改写一下，很方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字跑马灯</title>
<style>
#race_notice_p{position:relative; margin-left:70%;300px; overflow:hidden; height:25px; background-color:gray; }
#race_notice_s{position:absolute;left:0; top:0;color:red;}
#race_notice_s p{ margin:0;}
</style>
</head>
<body>
<div id='race_notice_p' >
<div id='race_notice_s'>
<p>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</div>
</div>
</body>
<script>
window.onload=function(){
// 要显示的文字可以通过ajax获取之后，嵌入p标签
function move(){
var speed = -5;
var race_notice_p = document.getElementById('race_notice_p');
var race_notice_s = document.getElementById('race_notice_s');
var p = race_notice_s.getElementsByTagName('p')[0];
var length = p.offsetWidth;
p.innerHTML +=p.innerHTML;
function move_do(){
if(race_notice_s.offsetLeft < - length){//重新开始
race_notice_s.style.left=0;
}
race_notice_s.style.left = race_notice_s.offsetLeft + speed +'px';
}
setInterval(move_do,100);
}
move();
}
</script>
</html>