間歇滾動：滾動一行后，延遲2秒后繼續滾動
具體實現代碼如下：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="關鍵字1,關鍵字2" /> 6 <meta name="Description" content="描述信息" /> 7 <title>間歇循環滾動</title> 8 <!--CSS/JS--> 9 <style type="text/css"> 10 *{margin:0;padding:0;} 11 ul,li{list-style:none;display:block;} 12 #scrollBox{height:144px;width:300px;margin:100px auto;background:#f09;overflow:hidden;} 13 #scrollBox #con1,#con2{width:280px;float:left;} 14 #scrollBox li{line-height:24px;text-align:center;} 15 16 </style> 17 18 19 </head> 20 <body> 21 <!--div--> 22 <div id="scrollBox"> 23 <ul id="con1"> 24 <li>我是測試內容1！！<li> 25 <li>我是測試內容2！！<li> 26 <li>我是測試內容3！！<li> 27 <li>我是測試內容4！！<li> 28 <li>我是測試內容5！！<li> 29 <li>我是測試內容6！！<li> 30 <li>我是測試內容7！！<li> 31 <li>我是測試內容8！！<li> 32 <li>我是測試內容9！！<li> 33 </ul> 34 35 </div> 36 <script type="text/javascript"> 37 var area =document.getElementById('scrollBox'); 38 var lHeight = 24; 39 var time = 50; 40 area.innerHTML+=area.innerHTML; 41 area.scrollTop = 0; 42 var timer; 43 function scrollMove(){ 44 area.scrollTop++; 45 timer = setInterval("scrollUp()",time); 46 } 47 48 function scrollUp(){ 49 if(area.scrollTop % lHeight==0){//滾動一行后，延時2秒 50 clearInterval(timer); 51 setTimeout("scrollMove()",2000); 52 }else{ 53 area.scrollTop++; 54 if(area.scrollTop>=area.scrollHeight/2){ //判斷滾動高度,當滾動高度大於area本身的高度時，使其回到原點重新滾動 55 area.scrollTop = 0; 56 } 57 } 58 59 } 60 61 setTimeout("scrollMove()",2000);//延遲2秒后執行scrollMove 62 63 64 </script> 65 </body> 66 67 </html>
效果預覽：點擊這里我的github