網頁內容左右不間斷滾動代碼
<title>內容左右不間斷滾動</title>
<div id="demo" style="overflow:hidden;width:678px; height:105px;color:#ffffff" align="center">
<div id="demo1">
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" align="center">
<tr>
<td><a href="#" target="_blank"><img src="images/pdimages/g1.gif" width="150" height="105" border ="0"></a></td>
<td><a href="#" target="_blank"><img src="images/pdimages/g2.gif" width="150" height="105" border ="0"></a></td>
<td><a href="#" target="_blank"><img src="images/pdimages/g3.gif" width="150" height="105" border ="0"></a></td>
<td><a href="#" target="_blank"><img src="images/pdimages/g4.gif" width="150" height="105" border="0" ></a></td>
<td><a href="#" target="_blank"><img src="images/pdimages/g5.gif" width="150" height="105" border ="0"></a></td>
<td><a href="#" target="_blank"><img src="images/pdimages/g6.gif" width="150" height="105" border ="0"></a></td>
<td><a href="#" target="_blank"><img src="images/pdimages/g7.gif" width="150" height="105" border ="0"></a></td>
<td><a href="#" target="_blank"><img src="images/pdimages/g8.gif" width="150" height="105" border ="0"></a></td>
<td><a href="#" target="_blank"><img src="images/pdimages/g9.gif" width="150" height="105" border="0" ></a></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
<script language="JavaScript">
var speed=80;
demo2.innerHTML=demo1.innerHTML; 克隆demo1為demo2
function Marquee(){
if(demo2.offsetWidth <= demo.scrollLeft){ //當滾動至demo1與demo2交界時
demo.scrollLeft = demo.scrollLeft - demo1.offsetWidth; demo跳到最頂端
}
else{
demo.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed); 設置計時器
demo.onmouseover=function() {clearInterval(MyMar);} 滑鼠移上時清除計時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);} 滑鼠移開時重設計時器
</script>
<div class="clear"></div>
</div>
</div></td>
</tr>
</table>
</td>
</tr>
</table>