li列表循环滚动的简单方法,无需插件,简单方法搞定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>li列表测试简单js代码 无需引用插件</title>
    <!-- 引入jq -->
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<style type="text/css">
    .view{
        margin: 0px auto;
    }
    ul{
        padding: 0px;
        list-style: none;
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0px;
    }
    /**
    *循环列表必须大于ul可容纳数量
    */
    li{
        height: 40px;
        line-height: 40px;
        border-bottom: 1px #666 solid;
        background-color: #ccc;
    }
    /**
    *该样式必须
     */
    .ul_div{
        width: 300px;
        height: 200px;
        overflow: hidden;
    }
</style>
<body>
<div class="view">
    <div class="ul_div">
        <ul class="ul">
            <li>li列表测试简单js代码 无需引用插件</li>
            <li>li列表测试简单js代码 无需引用插件</li>
            <li>li列表测试简单js代码 无需引用插件</li>
            <li>li列表测试简单js代码 无需引用插件</li>
            <li>li列表测试简单js代码 无需引用插件</li>
            <li>li列表测试简单js代码 无需引用插件</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var h_time;
    var h=0;
    $(function () {
        h_time=window.setInterval(h_top,3000);
    })
    function h_top() {
        var obj=$('.ul');
        if(h<40){
            h=h+1;
            obj.css('top',-h+'px')
            setTimeout(h_top,30);
            return false;
        }else{
            h=0;
            var i=$('.ul>li:nth-child(1)');
            obj.append(i);
            obj.css('top','0px')
        }
    }
</script>
</body>
</html>