使用mock模拟数据，实现图片文字向上的轮播

向上轮播，效果图：

使用mock模拟的数据，使用jq的ajax获取数据，字符串拼接，但是某些方面又写成了原生的js，图片来自百度图片，侵权请留言删除，欢迎大神提出意见或批评。
CSS代码：

           <style>
            *{
                padding: 0;
                margin: 0;
            }
            .div{
                height: 52px;
                width: 730px;
                overflow: hidden;
                margin: 0 auto;
            }
            li{
                list-style: none;
                float: left;
                width: 100px;
                
            }
            img{
                width: 30px;
                height: 30px;
                vertical-align: middle;
                margin-left: 10px;
            }
            .div{
                text-align: center;
            }
            .span{
                display: inline-block;
                margin-left: 10px;
            }
            .ul,.ul2{
                width: 680px;
                height: 50px;
                border: 1px solid #EEEEEE;
            }
        </style>

HTML代码：

       <div class="div">
           <ul class="ul"></ul>
           <ul class="ul2"></ul>
           <ul class="ul3"></ul>
       </div>

js代码:

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
            $(function(){
            var div =document.querySelector(".div");
            var ul = document.querySelector(".ul");
            var ul2 = document.querySelector(".ul2");
            div.scrollTop=0;
             function scrollUp(){
                if(div.scrollTop>=ul.offsetHeight){
                    div.scrollTop=0;
                }else{
                    div.scrollTop++;
                }
            }
             timer=null;
            clearInterval(timerr);
            var timerr=setInterval(scrollUp,50);
            div.onmouseover=function(){
             clearInterval(timerr)
            }
            div.onmouseleave=function(){
                  timerr=setInterval(scrollUp,50);
            }
            var str ="";
            var str2="";
            $.ajax({
                type:"GET",
                url:"https://easy-mock.com/mock/5b332dcb5d47652451763338/example/restful/:id/list_copy_1530240450637",
                async:true,
                dataType:'json',
                traditional: true,
                contentType: 'application/json',
                success:function(data){
                    for(var i=0;i<data.data.items.length-6;i++){
                        str+="<li><span><img src="+data.data.items[i].logo+">"+data.data.items[i].name+"</span><div>成绩:"+data.data.items[i].grades+"</div></li>"
                    }
                    $(".ul").append(str);
                    for(var i=6;i<data.data.items.length;i++){
                        str2+="<li><span><img src="+data.data.items[i].logo+">"+data.data.items[i].name+"</span><div>成绩:"+data.data.items[i].grades+"</div></li>"
                    }
                    $(".ul2").append(str2);
                },
                 fail: function () {
                console.log('err')
                }
            });
            })
        </script>