向上轮播，效果图：
图片.png
使用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>
