1：首先，jq 和 myScroll.js 及 scroll.css 这是必须要引入的。 别的js文件和css文件是你自己写的请求数据，样式等…
2： 这个是页面的结构 — 样式的话ul不能设置高度，给li设置高度。
<div class="container"><div class="rs-scroll"><ul class="cityRank" id="cityRank-1"></ul></div></div>
3： 把你要渲染的数据给ul后，然后在函数里面放下面的进行滚动的代码。（ajax获取数据及下面的是写在你自己的js文件中的。）
$('.rs-scroll').scroll({speed: 70, //数值越大，速度越慢rowHeight: 330 //li的高度});
4：jq文件自己网上搜一下就可以下载，剩下的两个我贴到下面。
（1）：mySroll.js 文件
// JavaScript Document(function ($) {var intId = [];var bakObj = '';$.fn.myScrollStop = function () {$.each(intId, function (i, item) {console.log(item);clearInterval(item);})};$.fn.scroll = function (options) {//默认配置var defaults = {speed: 40,rowHeight: 24};var opts = $.extend({}, defaults, options);function marquee(obj, step) {obj.find("ul").animate({marginTop: '-=1'}, 0,function () {// console.log('animate');var s = Math.abs(parseInt($(this).css("margin-top")));// console.log(s, step)if (s >= step) {let li = $(this).find("li:nth-child(1)");console.log(li)li.remove();$(this).css("margin-top", 0);}});}//备份function bak(obj) {bakObj = obj.html();}//恢复function restore(obj) {obj.html(bakObj);}//滚动定时(到底时持续3秒后重置列表, 再次滚动)function setMyInterval(i, obj, rowHeight, speed) {intId[i] = setInterval(function () {if (obj.find("ul").height() <= obj.height()) {console.log(obj.find("ul").height(), obj.height())// clearInterval(intId[i]);if (obj.find("ul").height() < 550) {return} else {setTimeout(function () {restore(obj);clearInterval(intId[i]);setMyInterval(i, obj, rowHeight, speed);}, 3000);}} else {marquee(obj, rowHeight);}}, speed);obj.hover(function () {clearInterval(intId[i]);}, function () {clearInterval(intId[i]);setMyInterval(i, obj, rowHeight, speed);});}this.each(function (i) {var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this);bak(_this);setMyInterval(i, _this, sh, speed);});}})(jQuery);
（2）：scroll.css 文件 其实里面的样式，好多都用不上，自己可以酌情删除。
/* CSS Document */*{margin:0;}.res-punish-list ul,.res-punish-list li,.res-punish-list dl,.res-punish-listol{list-style:none;}.res-punish-list{overflow-y: scroll;width: 101%;}.res-punish-list li{padding: 4px 10px;color: #efefef;/*font-size: 35px;*/}.res-punish-list li.lieven{/*background: rgba(239, 239, 239, 0.09); */color: #efefef;}.res-punish-list li{height:40px; line-height:40px;}.res-punish-list div.link{cursor: pointer;}.res-punish-list div{text-align: center;color:#f5f6f7;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}div.link{color: #55b5fe;}.res-punish-list div.scroll-25{float: left;width: 24%;padding: 0 2px;}div.scroll-title{color: #fff !important;font-size: 22px;}.res-punish-list div.scroll{text-overflow: ellipsis;overflow: hidden;}.res-punish-list div.scroll-20{float: left;width: 19%;}.res-punish-list div.scroll-30{float: left;width: 29%;}.res-punish-list div.scroll-40{float: left;width: 39%;}.res-punish-list div.scroll-10{float: left;width: 9%;}.res-punish-list div.scroll-50{float: left;width: 49%;}.res-punish-list div.scroll-60{float: left;width: 59%;}.res-punish-list div.scroll-15{float: left;width: 14%;cursor: pointer;}.scroll-bg{background: rgba(57, 84, 111, 0.28);margin:auto 2px;}.scroll-bg-sel{background-color:rgba(212, 56, 86,1) ;margin:auto 2px;}/*.res-punish-list a:focus{background: url(../../../zhsz/images/selected.png) no-repeat;background-size: 100% 100%;}*/.res-punish-list a {margin:auto 2px;text-decoration: none;float: left;width: 12%;text-align: center;color: #FFF3F3;font-size: 13px;}.gas-li a {margin:auto 2px;text-decoration: none;float: left;width: 10%;text-align: center;color: #FFF3F3;font-size: 13px;}.gas-div{/*background-color: black;*/background: url(../../../zhsz/images/selected.png) no-repeat;background-size: 100% 100%;}.gas-a{background: rgba(57, 84, 111, 0.28);}#scroll-list2 ul li:nth-of-type(odd) div{background:rgba(57, 84, 111, 0.28);}#scroll-list2 ul li:nth-of-type(even) div,#scroll-list-title ul li div{background:rgba(115, 143, 195, 0.35);}
