1.概述
循環滾動圖片，不僅可以增添Web頁面的動態效果，而且可以節省頁面空間，有效地保證在有限的頁面中顯示更多的圖片。
2.技術要點
主要應用setTimeout()方法實現圖片的循環滾動效果。setTimeout()方法的語法格式如下：
setTimeout（function,milliseconds,[arguments]）
參數說明：
a. function：要調用的JavaScript自定義函數名稱。
b. Milliseconds：設置超時時間（以毫秒為單位）。
功能：經過超時時間后，調用函數。此值可以用clearTimeout()函數清除。
3.具體實現
（1）在頁面的合適位置添加一個id屬性為demo的<div>標記，并在該標記中添加表格及要要滾動顯示的圖片。關鍵代碼如下：
<div id="demo" style=" overflow: hidden; width: 455px; height: 166px;"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" id="marquePic1"><!-- 要循環滾動的圖片 --><table width="455" border="0" align="center" cellpadding="0" cellspacing="0" ><tr align="center"><%for(int i=1;i<8;i++){%><td> <img src="Images/<%=i%>.jpg" width="118" height="166" border="1"> </td><%}%></tr></table></td><td id="marquePic2" width="1"></td></tr></table></div> （2）編寫自定義的JavaScript函數move()，用于實現無間斷的圖片循環滾動效果。speed數值越大圖片滾動的越快，具體代碼如下：
<script language="javascript">var speed=30 ; //設置間隔時間marquePic2.innerHTML=marquePic1.innerHTML;var demo=document.getElementById("demo"); //獲取demo對象function Marquee(n){ //實現圖片循環滾動的方法if(marquePic1.offsetWidth-demo.scrollLeft<=0){ demo.scrollLeft=0; }else{ demo.scrollLeft=demo.scrollLeft+n;} } var MyMar=setInterval("Marquee(5)",speed);demo.onmouseover=function() { //停止滾動clearInterval(MyMar);} demo.onmouseout=function() { //繼續滾動MyMar=setInterval("Marquee(5)",speed);}</script>以上所述是小編給大家介紹的JavaScript代碼實現圖片循環滾動效果的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
