使用原生js + css + jquery 实现一个文字轮播效果（二）
直接粘代码，如果发现Jquery引入出错了，更新一下Jquery CDN链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.swapper{
position: relative;
width: 600px;
height: 50px;
border:1px solid red;
overflow: hidden;
}
ul{
position:absolute;
left: 0;
top:0;
width: 600px;
height: auto;
}
ul li{
width: 600px;
height: 50px;
line-height: 50px;
font-size:20px;
color:#333;
text-align: center
}
</style>
</head>
<body>
<div class="swapper">
<ul>
<li>东临碣石，以观沧海。</li>
<li>水何澹澹，山岛竦峙。</li>
<li>树木丛生，百草丰茂。</li>
<li>秋风萧瑟，洪波涌起。</li>
<li>日月之行，若出其中；</li>
<li>星汉灿烂，若出其里。</li>
<li>幸甚至哉，歌以咏志。</li>
</ul>
</div>
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<script>
function swapper(id,height){
var ul=$(id);
var liFirst=ul.find('li:first');
$(id).animate({top:height}).animate({"top":0},0,function(){
var clone=liFirst.clone();
$(id).append(clone);
liFirst.remove();
})
}
setInterval("swapper('ul','-50px')",2500)
</script>
</body>
</html>
效果：
