效果
所用到的jquery文件点下面链接
https://gitee.com/lzh_gitee/web/tree/master/%E7%BD%91%E9%A1%B5/%E6%96%B0%E9%97%BB%E6%97%A0%E7%BC%9D%E5%BE%AA%E7%8E%AF
代码一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#hd{
width: 500px;
height: 40px;
margin: 200px auto;
border: 2px solid orange;
position: relative;
overflow: hidden;
}
#hd ul{
position: absolute;
top: 0;
left: 0;
}
#hd ul li{
width: 500px;
height: 40px;
list-style: none;
line-height: 40px;
text-align: center;
}
</style>
<script src='jquery-3.4.1.js'></script>
<script>
$(function(){
var c=0;
setInterval(function(){
c++;
if(c==5){
$("#hd ul").css({
'top':'0px'});
c=1;
}
var t=c*-40;
$("#hd ul").animate({
'top':t+'px'},500)
},1000)
})
</script>
</head>
<body>
<div id="hd">
<ul>
<li style='background: green;'>新华社：认清美方倒打一耙的把戏</li>
<li style='background: red;'>《新闻联播》告诉你：中国经济的底气从何而来</li>
<li style='background: orange;'> 最高检依法分别对缪瑞林、邢云、钱引安决定逮捕</li>
<li style='background: blue;'>亚洲文明对话大会来了，这份详细指南请注意查收</li>
<li style='background: green;'>新华社：认清美方倒打一耙的把戏</li>
</ul>
</div>
</body>
</html>
代码二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#hd{
width: 500px;
height: 40px;
margin: 200px auto;
border: 1px solid orange;
position: relative;
overflow: hidden;
}
#hd ul{
position: absolute;
bottom: -40px;
left: 0;
}
#hd ul li{
width: 500px;
height: 40px;
list-style: none;
line-height: 40px;
text-align: center;
}
</style>
<script src='jquery-3.4.1.js'></script>
<script src='jquery.easing.1.3.js'></script>
<script>
$(function(){
setInterval(function(){
$("#hd ul").append($("#hd ul li").first().height(0).animate({
'height':'40px'},500));
},1000)
})
</script>
</head>
<body>
<div id="hd">
<ul>
<li style='background: green;'>新华社：认清美方倒打一耙的把戏</li>
<li style='background: red;'>《新闻联播》告诉你：中国经济的底气从何而来</li>
<li style='background: orange;'> 最高检依法分别对缪瑞林、邢云、钱引安决定逮捕</li>
<li style='background: blue;'>亚洲文明对话大会来了，这份详细指南请注意查收</li>
</ul>
</div>
</body>
</html>