要实现图中圈起来的向上滚动特效,大家可以参考下面的代码 ![](https://box.kancloud.cn/03ab8568e0a8db99348a47847b29b81a_373x425.png) ~~~ <!--滚动开始--> <style type="text/css"> .auto-roll{ height:35px; overflow:hidden; background:#fff; margin-top:10px; } .auto-roll li{ padding-left:8px; line-height:35px; } .auto-roll li i:nth-child(1){ color:orange; margin-right:7px; } .auto-roll li a{ color:orange; } </style> <div class="auto-roll"> <ul class="qun_wapindex_r001"> {qb:tag name="qun_wapindex_r001" type="qun" order="id" by="desc" rows="5" js="qun_wapindex_r001"} <li><i class="fa fa-volume-up"></i>恭喜<a href="{$rs.url}">{$rs.title}</a>入驻成功</li> {/qb:tag} </ul> </div> <script type="text/javascript"> function autoScroll(obj){ $(obj).find("ul").animate({ marginTop : "-35px" },1000,function(){ $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); }) } $(function(){ var scroll=setInterval('autoScroll(".auto-roll")',2500); $(".auto-roll").hover(function(){ console.log("aaa"); clearInterval(scroll); },function(){ scroll=setInterval('autoScroll(".auto-roll")',2500); }); }); </script> <!--滚动结束--> ~~~ 上面是标签调用圈子的 ~~~ {qb:tag name="qun_wapindex_r001" type="qun" order="id" by="desc" rows="5" js="qun_wapindex_r001"} ~~~ 你把 ` type="qun" ` 改成 ` type="bbs" ` 就是调用论坛的内容