http://www.digifilm.com.cn/我要做这个网站最下面的那个移动的效果，
只有当鼠标放到左边或右边那个箭头处时，图片才会慢慢移动！
这个网页的源文件中有代码，可是也许是由于我的是写的静态页面，
也就是那几个图片是死的，写好了的，所以代码不能用，它移动不了！
只有当鼠标放到左边或右边那个箭头处时，图片才会慢慢移动！
这个网页的源文件中有代码，可是也许是由于我的是写的静态页面，
也就是那几个图片是死的，写好了的，所以代码不能用，它移动不了！
<head>
<title>move</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
ul,ol {
margin:0;
padding:0;
}
td div{
width:150px;
height:170px;
border:solid 1px #060;
}
</style>
</head>
<body>
<input type="button" onmouseover="left(this)" onmouseout="out()" value="<"/><input type="button" onmouseover="right(this)" onmouseout="out()" value=">"/>
<div style="border:solid 1px #06c;height:200px;width:90%;overflow:hidden" id="inner">
<table>
<tr>
<td><div>a</div></td>
<td><div>b</div></td>
<td><div>c</div></td>
<td><div>d</div></td>
<td><div>e</div></td>
<td><div>f</div></td>
<td><div>g</div></td>
<td><div>h</div></td>
<td><div>i</div></td>
<td><div>j</div></td>
<td><div>k</div></td>
<td><div>l</div></td>
<td><div>m</div></td>
<td><div>n</div></td>
<td><div>o</div></td>
<td><div>p</div></td>
<td><div>q</div></td>
<td><div>r</div></td>
<td><div>s</div></td>
<td><div>t</div></td>
<td><div>u</div></td>
<td><div>v</div></td>
<td><div>w</div></td>
<td><div>x</div></td>
<td><div>y</div></td>
<td><div>z</div></td></tr>
</table>
</div>
</body>
<script type="text/javascript"> var d=document.getElementById("inner");
var left=function(obj) {
//alert(d.scrollLeft);
d.scrollLeft-=156;
leftrun()
}
var e=0;
var lefttm;
var righttm;
var right=function(obj) {
// d.scrollLeft+=156;
e=d.scrollLeft+d.style.width
rightrun()
}var rightrun = function(){
clearTimeout(lefttm);
if(d.scrollLeft>=e){d.scrollLeft=e;return;}
d.scrollLeft+=2;
righttm=setTimeout(rightrun,10);
}
var leftrun = function(){
clearTimeout(righttm);
if(d.scrollLeft<=0){d.scrollLeft=0;return;}
d.scrollLeft-=2;
lefttm=setTimeout(leftrun,10);
}
function out(){
if(lefttm) clearTimeout(lefttm);
if(righttm) clearTimeout(righttm);
}
</script>
</html>
<div id="anleft"><img onmouseover="left(this)" onmouseout="out()" style="CURSOR: pointer" src="imagessource/imgleft.gif" width="20" height="20" /></div>
<div id="demo" style="OVERFLOW: hidden; WIDTH: 915px">
<table id="marquePic1" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<ul style="display:inline">
<li style="text-align:left;"><a href="#"><img src="filmimages/惊天动地.jpg" width="110" height="147" border="0" alt="惊天动地"/></a></li>
<li><a href="#">惊天动地</a></li>
</ul>
<ul style="display:inline">
<li><a href="#"><img src="filmimages/狼灾记.bmp" width="110" height="147" border="0" alt="狼灾记"/></a></li>
<li><a href="#">狼灾记</a></li>
</ul>
<ul style="display:inline">
<li><a href="#"><img src="filmimages/欠债还债.bmp" width="110" height="147" border="0" alt="欠债还债"/></a></li>
<li><a href="#">欠债还债</a></li>
</ul>
<ul style="display:inline">
<li><a href="#"><img src="filmimages/逃亡鳄鱼岛.bmp" width="110" height="147" border="0" alt="逃亡鳄鱼岛"/></a></li>
<li><a href="#">逃亡鳄鱼岛</a></li>
</ul>
<ul style="display:inline">
<li><a href="#"><img src="filmimages/麋鹿王.jpg" width="110" height="147" border="0" alt="麋鹿王"/></a></li>
<li><a href="#">麋鹿王</a></li>
</ul>
<ul style="display:inline">
<li><a href="#"><img src="filmimages/特工008.bmp" width="110" height="147" border="0" alt="特工008"/></a></li>
<li><a href="#">特工008</a></li>
</ul>
<ul style="display:inline">
<li><a href="#"><img src="filmimages/窈窕绅士.bmp" width="110" height="147" border="0" alt="窈窕绅士"/></a></li>
<li><a href="#">窈窕绅士</a></li>
</ul>
<ul style="display:inline">
<li><a href="#"><img src="filmimages/恋爱前规则.jpg" width="110" height="147" border="0" alt="恋爱前规则"/></a></li>
<li><a href="#">恋爱前规则</a></li>
</ul>
</td>
</tr>
</table>
</div>
<div id="anright"><img onmouseover="right(this)" onmouseout="out()" style="CURSOR: pointer" src="imagessource/imgright.gif" width="20" height="20" /></div>
</div><script type="text/javascript">
var d = document.getElementById("anleft");
var left = function(obj) {
//alert(d.scrollLeft);
d.scrollLeft -= 156;
leftrun()
}
var e = 0;
var lefttm;
var righttm;
var right = function(obj) {
// d.scrollLeft+=156;
e = d.scrollLeft + d.style.width
rightrun()
} var rightrun = function() {
clearTimeout(lefttm);
if (d.scrollLeft >= e) { d.scrollLeft = e; return; }
d.scrollLeft += 2;
righttm = setTimeout(rightrun, 10);
}
var leftrun = function() {
clearTimeout(righttm);
if (d.scrollLeft <= 0) { d.scrollLeft = 0; return; }
d.scrollLeft -= 2;
lefttm = setTimeout(leftrun, 10);
}
function out() {
if (lefttm) clearTimeout(lefttm);
if (righttm) clearTimeout(righttm);
}
</script>