JS实现div左右自动滚动(可设置滚动高度,速度,停留时间)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现div自动滚动</title>
<style>
.ylp-show div{height:20px;}
</style>
</head>
<body>
<div id="show" style="overflow:hidden;height:40px;" class="ylp-show">  
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1</div>
    <div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb2</div>
    <div>ccccccccccccccccccccccccccccccccccccccccccccc3</div>
    <div>ddddddddddddddddddddddddddddddddddddddddddddd4</div>
    <div>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee5</div>
    <div>fffffffffffffffffffffffffffffffffffffffffffff6</div>
    <div>ggggggggggggggggggggggggggggggggggggggggggggg7</div>
</div>  
<script>  
function startmarquee(lh,speed,delay){    
     var t;    
    var oHeight = 210; /**//** div的高度 **/  
    var p=false;  
    var o=document.getElementById("show");    
     var preTop = 0;  
    o.scrollTop = 0;    
    function start(){    
       t=setInterval(scrolling,speed);    
        o.scrollTop += 1;    
    }    
    function scrolling(){    
        if(o.scrollTop%lh!=0 && o.scrollTop%(o.scrollHeight-oHeight-1)!=0){  
            preTop = o.scrollTop;  
           o.scrollTop+=1;  
            if(preTop >= o.scrollHeight || preTop==o.scrollTop){  
                o.scrollTop = 0;  
            }  
        }else{  
           clearInterval(t);    
           setTimeout(start,delay);    
       }  
    }    
    setTimeout(start,delay);    
}    
startmarquee(20,20,1500);    
/**//**startmarquee(一次滚动高度,速度,停留时间);**/    
</script>  
</body>
</html>

 

评论关闭