var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
demo的css一定要设定width和overflow:hidden
<div id="demo">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="demo1">
<table width="1000" height="172" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
文字放这里
</td>
</tr>
</table>
</div>
</td>
<td>
<div id="demo2"></div>
</td>
</tr>
</table>
</div>
原理demo2复制demo1然后连成一行，demo1滚动完滚动demo2因为内容一样所以看不出来，demo2滚动完滚动demo1
保存成html文件，打开就能看到效果了。
<html>
<head>
<title>left to right</title>
</head>
<script type="text/javascript">
function onload() {
window
.setInterval(
function() {
var marginLeft = document
.getElementById("leftToRight").style.marginLeft
moveAfterLeft = marginLeft.substr(0, marginLeft.length - 2) * 1 + 50
if (moveAfterLeft <screen.width - 150) {
document.getElementById("leftToRight").style.marginLeft = moveAfterLeft
} else {
clearInterval()
}
}, 100)
}
</script>
<body onload="onload()">
<ul>
<li id="leftToRight" style="margin-left: 0width: 100px">left to
right</li>
</ul>
</body>
</html>
根据你的具体情况，有两种思路。第一种，类似于滑动效果，用强父元素，overflow:hidden了。然后通过点击左右的键，获取当前父元素的宽度，修改父元素css属性的left，注意，position:absolute时left才起作用。
第二种就比较简单。就是简单的隐藏，点击左右，隐藏第一屏的信息，再次点击，隐藏第一、第二屏的信息，依次类推，当最后一屏的时候，又开始显示第一屏的信息，这样就是循环了。可以用fadeIn()等方法来加入一些效果
思路就是这样，说起来麻烦，其实很简单、
