js 走马灯
想做在div里做一个走马丁的效果
<div id="txt">我爱北京天安门，我爱中国</div>
请问怎么写代码用按钮控制向左还是向右，还有一个停止按钮
[最优解释]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
img{border: none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){
if(demo.scrollLeft()>=demo1.width())
demo.scrollLeft(0);
else{
demo.scrollLeft(demo.scrollLeft()+1);
}
}
var MyMar=setInterval(Marquee,speed)
demo.mouseover(function() {
clearInterval(MyMar);
} )
demo.mouseout(function() {
MyMar=setInterval(Marquee,speed);
} )
});
</script>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
<table border=0 align=center cellpadding=0 cellspacing=0 >
<tr>
<td id="demo1" valign="top" bgcolor="#ffffff" >
<!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><a href="#" target="_blank"><img alt="js 走马灯,该怎么处理" src="01.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img alt="js 走马灯,该怎么处理" src="02.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img alt="js 走马灯,该怎么处理" src="03.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img alt="js 走马灯,该怎么处理" src="04.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img alt="js 走马灯,该怎么处理" src="05.jpg" width="150" height="100"></a></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
</body>
</html>
