網頁內容左右不間斷滾動代碼

網頁內容左右不間斷滾動代碼

<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>