其實實現文字的跑馬燈和實現圖片輪播的原理是一樣的。
下面是我自己實現的，文字的位置可以隨便更改，效果不會變，文字的內容可以通過ajax獲取，同時，可以直接用Jquery改寫一下，很方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字跑馬燈</title>
<style>
#race_notice_p{position:relative; margin-left:70%;width: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>