<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现问题滚动</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
*{
padding:0;
margin: 0;
}
ul,li{
list-style: none;
}
.box{
width: 300px;
height: 20px;
overflow: hidden;
background-color: black;
position: relative;
}
.box .list{
width: 300px;
height: auto;
position: absolute;
}
.box .list li{
width: 300px;
height: 20px;
line-height: 20px;
color: red;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.box2{
width: 600px;
height:20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
<body>
<div class="box">
<ul class="list" data="0">
<li>这期老板很实在呀，另外应该锅底或者别的什么费用，我还点了一些收费的东西，所以老板不会亏的(⌒▽⌒)</li>
<li>《AKB少女90天的挑战》第七期正式上线！魏新回上海参加拍摄工作，瑞希迎来了难得的休假日，她们分别度过了怎样的一天呢？</li>
<li>感冒没好利索，再加上“服务员”临时有事，直播顺延至明天，万请见谅</li>
</ul>
</div>
<div class="box2">
<div class="font">《AKB少女90天的挑战》第七期正式上线！魏新回上海参加拍摄工作，瑞希迎来了难得的休假日，她们分别度过了怎样的一天呢？</div>
</div>
<script>
$(function(){
setInterval("font_auto();",3000);
});
function font_auto(){
var num = $(".box .list").attr("data");
num ++ ;
if(num > $(".box .list li").length-1){
num = 0;
}
$(".box .list").attr("data",num);
$('.box .list').animate({'top':-20*num});
}
</script>
</body>
</html>
