间歇滚动：滚动一行后，延迟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
时间： 2024-10-13 08:00:30