因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。
原生JS版本
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文字上下无缝轮播</title></head><style>* {margin: 0;padding: 0;}#container{width: 60%;margin: 100px auto;position: relative;height: 200px;overflow: hidden;}#list-wrapper{position: relative;}ul {list-style: none;background: #f8f8f8;text-align: center;padding: 0 20px;}li{height: 35px;line-height: 35px;color: #fff;}li:nth-child(odd){background: #5077aa;}li:nth-child(even){background: #fb6b06;}</style><body><div id="container"><div id="list-wrapper" style="top: 0"><ul class="notice-list" id="notice-list"><li>富强、民主、文明、和谐、自由1</li><li>富强、民主、文明、和谐、自由2</li><li>富强、民主、文明、和谐、自由3</li><li>富强、民主、文明、和谐、自由4</li><li>富强、民主、文明、和谐、自由5</li><li>富强、民主、文明、和谐、自由6</li></ul><ul class="notice-list" id="notice-list-2"></ul></div></div><script>var ROLL_SPEED = 100var noticeList1 = document.getElementById('notice-list');var noticeList2 = document.getElementById('notice-list-2');var listWrapper = document.getElementById('list-wrapper');noticeList2.innerHTML=noticeList1.innerHTML;var timer = setInterval(rollStart, ROLL_SPEED);function rollStart() {if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) {listWrapper.style.top = '0px'} else {var top = listWrapper.style.toplistWrapper.style.top = _subStr(top)-1+'px'}}// 截取px前数值function _subStr(str) {var index = str.indexOf('px');if (index > -1) {return parseFloat(str.substr(0, index + 1))}}</script></body></html>
jQuery版本
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文字上下无缝轮播</title></head><style>* {margin: 0;padding: 0;}#container{width: 60%;margin: 100px auto;position: relative;height: 200px;overflow: hidden;}#list-wrapper{position: relative;top: 0;}ul {list-style: none;background: #f8f8f8;text-align: center;padding: 0 20px;}li{height: 35px;line-height: 35px;color: #fff;}li:nth-child(odd){background: #5077aa;}li:nth-child(even){background: #fb6b06;}</style><body><div id="container"><div id="list-wrapper"><ul class="notice-list" id="notice-list"><li>富强、民主、文明、和谐、自由1</li><li>富强、民主、文明、和谐、自由2</li><li>富强、民主、文明、和谐、自由3</li><li>富强、民主、文明、和谐、自由4</li><li>富强、民主、文明、和谐、自由5</li><li>富强、民主、文明、和谐、自由6</li></ul><ul class="notice-list" id="notice-list-2"></ul></div></div><script src="/jquery/3.3.1/jquery.min.js"></script><script>var ROLL_SPEED = 100var noticeList1 = $('#notice-list');var noticeList2 = $('#notice-list-2');var listWrapper = $('#list-wrapper');noticeList2.html(noticeList1.html())listWrapper.css('top', 0)var timer = setInterval(rollStart, ROLL_SPEED);function rollStart() {if (Math.abs(_subStr(listWrapper.css('top'))) >= noticeList1.height()) {listWrapper.css('top', 0)} else {var top = listWrapper.css('top');listWrapper.css('top', _subStr(top) - 1)}}// 截取px前数值function _subStr(str) {var index = str.indexOf('px');if (index > -1) {return parseFloat(str.substr(0, index + 1))}}</script></body></html>
