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