之前寫大屏寫過一個滾屏，整理了代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style>
#ontime{
width: 50vw;
height: 55vh;
}
.tu-title{
background: #1488CC; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #061C93,#1935A2, #000e4A); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #061C93,#1935A2, #000e4A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* background-color: aqua; */
height: 3.7vh;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 1.1vw;
font-weight: 600;
}
.tu-title>span{
background: linear-gradient(to right, #0052D4, #99ffff);
-webkit-background-clip: text;
color: transparent;
}
#info-list{
background-color: #66B3FF;
}
#title{
width: 100%;
height: 5vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.biao5-title{
width: 20%;
height: 5vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color:#fff;
font-size: 0.85vw;
font-weight: 500;
}
#con{
width: 100%;
height: 30vh;
overflow: hidden;
text-align: center;
}
#con>ul{
width: 100%;
height: 4.4vh;
list-style: none;
padding: 0;
margin: 0;
}
#conn>li{
width: 100%;
height: 4.4vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.info-text{
width: 20%;
height: 4.4vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="ontime">
<div class="tu-title"><span> 實時交易數據</span></div>
<div id="info-list">
<div id="title">
<div class="biao5-title" id="title-info">商戶名稱</div>
<div class="biao5-title" id="title-info">過磅時間</div>
<div class="biao5-title" id="title-info">品類</div>
<div class="biao5-title" id="title-info">重量(kg)</div>
<div class="biao5-title" id="title-info">金額(¥)</div>
</div>
<div id="con">
<ul id="conn">
<li>
<div id="info-user" class="info-text">1</div>
<div class="info-text">2</div>
<div class="info-text">3</div>
<div class="info-text">4</div>
<div class="info-text">5</div>
</li>
<li>
<div id="info-user" class="info-text">6</div>
<div class="info-text">7</div>
<div class="info-text">8</div>
<div class="info-text">9</div>
<div class="info-text">10</div>
</li>
<li>
<div id="info-user" class="info-text">11</div>
<div class="info-text">12</div>
<div class="info-text">13</div>
<div class="info-text">14</div>
<div class="info-text">15</div>
</li>
<li>
<div id="info-user" class="info-text">16</div>
<div class="info-text">17</div>
<div class="info-text">18</div>
<div class="info-text">19</div>
<div class="info-text">20</div>
</li>
<li>
<div id="info-user" class="info-text">21</div>
<div class="info-text">22</div>
<div class="info-text">23</div>
<div class="info-text">24</div>
<div class="info-text">25</div>
</li>
<li>
<div id="info-user" class="info-text">26</div>
<div class="info-text">27</div>
<div class="info-text">28</div>
<div class="info-text">29</div>
<div class="info-text">30</div>
</li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function timer(opj){
$(opj).find('ul').animate({
marginTop : "-4.4vh"
},500,function(){
$(this).css({marginTop : "0vh"}).find("li:first").appendTo(this);
})
}
//懸停時停止滑動，離開時繼續執行
$(function(){
let mit=setInterval('timer("#con")',2000);
$('#conn').children("li").hover(function(){
clearInterval(mit); //清除自動滑動動畫
},function(){
mit = setInterval('timer("#con")',2000); //繼續執行動畫
})
});
</script>
</html>