JS实例——间歇循环滚动
Posted 云中志
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实例——间歇循环滚动相关的知识，希望对你有一定的参考价值。
间歇滚动：滚动一行后，延迟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
以上是关于JS实例——间歇循环滚动的主要内容，如果未能解决你的问题，请参考以下文章