jquery实现广告上下滚动效果

本文实例为大家分享了jquery实现广告上下滚动效果的具体代码，供大家参考，具体内容如下

一、jquery上下滚动预约记录

jquery广告上下滚动效果,直接上代码

代码如下（示例）：

CSS:

<style>/* -------------------------预约记录----------------------------------- */.Top_Record{}.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}.maquee{ height:265px;}.topRec_List ul{ width:100%; height:195px;}.topRec_List li{ height:35px;font-size:14px;width: 100% }/*.topRec_List li:nth-child(2n){ background:#077cd0}*/.topRec_List li div{ float:left;}.topRec_List li div:nth-child(1){ width:35%;}.topRec_List li div:nth-child(2){ width:35%;}.topRec_List li div:nth-child(3){ width:20%;}.maquee ul li{float: left}.active{color: #FC6A13;}</style>

HTML:

<div style=\"background: #ffffff;width: 100%;margin-top: 5pt;padding-bottom: 10pt;padding-top: 5pt\"><div class=\"titled\"><p class=\"person\">已有235人看房</p><p class=\"titleds\">预约记录</p></div><br><div class=\"Top_Record\"><div class=\"topRec_List\"><dl>{{-- <dd> </dd>--}}</dl><div class=\"maquee\"><ul><li><div>张三1</div><div>131****121</div><div>10分钟前</div></li><li><div>张三2</div><div>131****121</div><div>10分钟前</div></li><li><div>张三3</div><div>131****121</div><div>10分钟前</div></li></ul></div></div></div></div>

JS:

<script type=\"text/javascript\">const index = ($(\".maquee\").height() / $(\".maquee ul li\").height());function autoScroll(obj){$(obj).find(\"ul\").animate({marginTop : \"-35px\"},1000,function(){$(this).css({marginTop : \"0px\"}).find(\"li:first\").appendTo(this);})$(\".maquee ul li\").removeClass(\'active\');$(\".maquee ul li\").eq(parseInt(index)+1).addClass(\'active\')}$(function(){var scroll=setInterval(\'autoScroll(\".maquee\")\',1500);});$(\".maquee ul li\").eq(parseInt(index)+1).addClass(\'active\')</script>

二、效果