首页 > 代码库 > JS实例——间歇循环滚动

JS实例——间歇循环滚动

2024-08-26 09:11:23   219人阅读

间歇滚动：滚动一行后，延迟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实例——间歇循环滚动


联系
我们