效果图:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跑马灯效果</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<style>
#scrolldiv {
overflow: hidden;
}
</style>
</head>
<body>
<div id="app">
<div class="race_lamp" style="background: rgba(0,0,0,.5);color: #FFFFFF;font-size: 20px;">
<marquee direction="left" loop=5 scrollamount=2>
<span style="margin-right: 20px;" v-for="(item,index) in paomadeng_contents">{{item}}</span>
</marquee>
</div>
<div id="scrolldiv" style="height: 200px;margin-top: 200px;overflow: hidden; background: #FF0000;">
<div style="height: 15px;"></div>
<ul id="scroll1" style="">
<li style="line-height: 40px;" v-for="(item,idx) in getExchangeList">{{item}}</li>
</ul>
<div class="" style="height: 5px;"></div>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
msg: '',
paomadeng_contents: ['1111111', '22222222', '3333333', '4444444', '55555', '666666', '777777', '888888'],
getExchangeList: ['1111111啦啦啦啦啦', '22222222啦啦啦啦啦', '3333333啦啦啦啦啦', '44444啦啦啦啦啦44', '55啦啦啦啦啦555', '666啦啦啦啦啦666', '777啦啦啦啦啦777', '888啦啦啦啦啦888']
}
},
methods: {
rollDiv(t) {
var scroll1 = document.getElementById("scroll1");
var scrolldiv = document.getElementById("scrolldiv");
scrolldiv.scrollTop = 0;
var aaa = 0;
setTimeout(() => {
setInterval(() => {
console.log(scrolldiv.scrollTop)
console.log(scrolldiv.scrollHeight)
if (scrolldiv.scrollTop < scrolldiv.scrollHeight - 195) {
scrolldiv.scrollTop = (scrolldiv.scrollTop + 1) + 40
} else {
scrolldiv.scrollTop = 0;
}
}, t * 100);
}, 1000)
}
},
mounted() {
this.rollDiv(this.getExchangeList.length * 3);
}
})
</script>
</body>
</html>