方法：使用定时器让元素不断替换及高度变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <script src="./jquery-3.4.1.min.js"></script> <style type="text/css"> #box{ width: 202px; height: 32px; line-height: 30px; margin: 200px auto; border: 1px solid #000; position: relative; /* overflow: hidden; */ } #box ul{ width: 100%; /* border: 1px solid red; */ position: absolute; bottom: -30px; left: 0; } #box ul li{ width: 100px; height: 30px; line-height: 30px; padding-left: 10px; } </style> <script> // 滚动播放函数 function gunDongBoFang(){ // 第一个元素高度变成0 var first = $("#box ul li").first().height(0); // // 把第一个元素追加到父元素中 $("#box ul").append(first); // 最后一个元素高度慢慢变成30px // $("#box ul li").last().css("height", "20px"); $("#box ul li").last().animate({height:"30px"}, 1000); }; // 定时器，每2秒执行一次 setInterval(gunDongBoFang, 2000); </script> </head> <body> <div id="box"> <ul> <li>第1条公告...</li> <li>第2条公告...</li> <li>第3条公告...</li> </ul> </div> </body> </html>优化：鼠标移入停止，移出开始
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <script src="./jquery-3.4.1.min.js"></script> <style type="text/css"> #box{ width: 202px; height: 32px; line-height: 30px; margin: 200px auto; border: 1px solid #000; position: relative; overflow: hidden; } #box ul{ width: 100%; /* border: 1px solid red; */ position: absolute; bottom: -30px; left: 0; } #box ul li{ width: 100px; height: 30px; line-height: 30px; padding-left: 10px; } </style> <script> $(function(){ // 滚动播放函数 function gunDongBoFang(){ // 第一个元素高度变成0 // var first = $("#box ul li").first().height(0); // 把第一个元素追加到父元素中 // $("#box ul").append(first); // 最后一个元素高度慢慢变成30px // $("#box ul li").last().animate({height:"30px"}, 1000); // 简化写法 $("#box ul").append($("#box ul li").first().height(0).animate({height:"30px"}, 1000)); }; // 定时器，每2秒执行一次 var time = setInterval(gunDongBoFang, 2000); // 鼠标移入#box元素中，停止定时器 $("#box").mouseenter(function(){ clearInterval(time); }); // 鼠标移出#box元素后，开始定时器 $("#box").mouseleave(function(){ // setInterval(gunDongBoFang, 1000); 错误写法，鼠标移入移出定时器会累加 //鼠标移出时，开始定时器，并将定时器赋值给time变量，而当鼠标再次移入时，则刚好删除上次的定时器，不会累加 time = setInterval(gunDongBoFang, 2000); }); }); </script> </head> <body> <div id="box"> <ul> <li>第1条公告...</li> <li>第2条公告...</li> <li>第3条公告...</li> </ul> </div> </body> </html>