autoRoll_UpDown()|上下滚动函数|无缝|自动（自带demo）

autoRoll_UpDown函数

 function autoRoll_UpDown($domObj,speed){  //$domObj 外围容器的jQuery式元素对象   speed 滚动速度，单位毫秒
    var speed = speed || 3000;   //默认速度3秒
    var len = $domObj.children().length;
    var chiH = $domObj.children().height();
    if(len>1){
        $domObj.append($domObj.html());
        var pointRoll = 0;
        function move(){
            pointRoll++;
            if(pointRoll > len){
                pointRoll = 1;
                $domObj.css('top','0px');
            }
            $domObj.animate({top:-chiH*pointRoll+"px"});
        }
        var time = setInterval(move,speed)
        $domObj.hover(function(){
            clearInterval(time);
        },function(){
            time = setInterval(move,speed)
        })
        
    }
}

 

下边是一个已经跑通的demo

<html>
<head>
<title>（demo）自动-无缝-上下滚动</title>
<script type="text/javascript" src="http://i.tq121.com.cn/j/jquery-1.8.2.js"></script>
<link type="text/css" rel="stylesheet" href="http://i.tq121.com.cn/c/core.css">
</head>
<body>
<style>
*{padding:0; margin:0;}
div{ margin:100px;height:50px;width:200px; overflow:hidden; position:relative; }
ul{ position:absolute; top:0; left:0; width:100px;}
ul li{ height:50px; width:200px; text-align:center; line-height:50px;color:#fff; cursor:pointer;}
</style>
<div>
    <ul>
        <li style="background:red;">11</li>
        <li style="background:blue;">22</li>
    </ul>
</div>
<script>
var $U = $('ul');
//autoRoll_UpDown($U); //默认滚动速度3秒
autoRoll_UpDown($U,1000);  //设置滚动速度 1秒

function autoRoll_UpDown($domObj,speed){
    var speed = speed || 3000;   //默认速度3秒
    var len = $domObj.children().length;
    var chiH = $domObj.children().height();
    if(len>1){
        $domObj.append($domObj.html());
        var pointRoll = 0;
        function move(){
            pointRoll++;
            if(pointRoll > len){
                pointRoll = 1;
                $domObj.css('top','0px');
            }
            $domObj.animate({top:-chiH*pointRoll+"px"});
        }
        var time = setInterval(move,speed)
        $domObj.hover(function(){
            clearInterval(time);
        },function(){
            time = setInterval(move,speed)
        })
        
    }
}
</script>
</body>
</html>

 

posted @ 2014-10-30 17:01  刘金宇  阅读(297)  评论(0)  编辑  收藏  举报