使用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.οnmοuseοver=function(){
             clearInterval(timerr)
            }
            div.οnmοuseleave=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>