標籤：title lang css 效果 https images review oct asc
間歇滾動：滾動一行後，延遲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秒後執行scrollMove62 63 64 </script>65 </body>66 67 </html>
效果預覽：點擊這裡我的github
JS執行個體——間歇迴圈滾動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
