<!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>
