在网站也有很多案例了。在这边主要总结自己的问题。首先,先看下页面代码:
<!--下面是向右滚动代码-->
<div id="right" style="overflow:hidden;padding:10px 10px 0px 10px;width:900px;">
<table cellpadding="0" cellspacing="0" border="0" width="900px">
<tr>
<td id="right1" valign="top" align="center">
<table id="te" style="width: 100%; border-collapse: collapse;" border="0" cellspacing="0">
<tr>
<td style="width: 20%;" valign="top">
<a href="" target="_blank"><img src="rea_bak_files/20090519091944.JPG" alt="" width="90" border="0" height="90"></a>
</td><td style="width: 20%;" valign="top">
<a href="" target="_blank"><img src="rea_bak_files/20090519092104.JPG" alt="" width="90" border="0" height="90"></a>
</td><td style="width: 20%;" valign="top">
<a href="" target="_blank"><img src="rea_bak_files/20090519092118.JPG" alt="" width="90" border="0" height="90"></a>
</td><td style="width: 20%;" valign="top">
<a href="" target="_blank"><img src="rea_bak_files/20090519092217.JPG" alt="" width="90" border="0" height="90"></a>
</td><td style="width: 20%;" valign="top">
<a href="" target="_blank"><img src="rea_bak_files/20090519092234.JPG" alt="" width="90" border="0" height="90"></a>
</td><td style="width: 20%;" valign="top">
<a href="" target="_blank"><img src="rea_bak_files/20090519092450.jpg" alt="" width="90" border="0" height="90"></a>
</td>
</tr>
</table>
</td>
<td id="right2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed=30//速度数值越大速度越慢
document.getElementById("right2").innerHTML=document.getElementById("right1").innerHTML;
function Marquee(){
if(document.getElementById("right").scrollLeft<=0)
document.getElementById("right").scrollLeft+=document.getElementById("right2").offsetWidth;
else{
document.getElementById("right").scrollLeft--;
}
}
var MyMar=window.setInterval(Marquee,speed);
document.getElementById("right").οnmοuseοver=function() {clearInterval(MyMar);};
document.getElementById("right").οnmοuseοut=function() {MyMar=setInterval(Marquee,speed);};
</script>
<!--向右滚动代码结束-->
1.在ie6与ie7/8 firefox opera
要设置图片滚动的宽度
2.在firefox中采用document.getElementById("right2").innerhtml 而不是right2.innerhtml