js控制div自动上下翻滚

浏览数：21 / 时间：2015年06月09日

 1  <style>
 2     #test{
 3 
 4         width:785px;
 5         height:175px;
 6         overflow:hidden;
 7     }
 8     #data{
 9         width:785px;
10         height:175px;
11     }
12   </style>

　　注意：1.最大的div，id为test，overflow:hidden;　这个多余的必须是隐藏

　　　　　2.注意最大的div和它的仔的width和height，否则效果很难出现

 1 <script>
 2      function ting(){
 3         clearInterval(myTimer);
 4         clearInterval(myTimerStop);
 5     }
 6     function start(){
 7         myTimer = setInterval(init,speed);
 8     }
 9     var speed = 10;
10     function init(){
11         var data = document.getElementById("test");
12         if(data.scrollTop>=175*8){
13             data.scrollTop=0;
14         }else{
15             if(data.scrollTop==0){
16                 ting();
17                 myTimerStop = setInterval(stopTime,1000);
18             }
19             data.scrollTop=data.scrollTop+1;
20             if(data.scrollTop%175==0){
21                 ting();
22                 myTimerStop = setInterval(stopTime,1000);
23             }
24         }
25     }
26     var y = 1;
27     function stopTime(){
28         y++;
29         if(y==5){
30             clearInterval(myTimerStop);
31             myTimer = setInterval(init,speed);
32             y=1;
33         }
34     }
35     var myTimer = setInterval(init,speed);
36     var myTimerStop = null ;
37   </script>

<div id="test" onmouseover="ting();" onmouseout="start();">
        <div id="data" >1</div>
        <div id="data" >2</div>
        <div id="data" >3</div>
        <div id="data" >4</div>
        <div id="data" >5</div>
        <div id="data" >6</div>
        <div id="data" >7</div>
        <div id="data" >8</div>
        <div id="data" >9</div>
    </div>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js控制div自动上下翻滚