html:
<div class="scroll-wrap" style="height: 16px; overflow: hidden;">
<ul class="scroll-con fn-left" style="margin-top: 0px;">
<li style="height: 16px; line-height: 16px; overflow: hidden;">
<a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家1</a>
</li>
<li style="height: 16px; line-height: 16px; overflow: hidden;">
<a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家2</a>
</li>
<li style="height: 16px; line-height: 16px; overflow: hidden;">
<a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家3</a>
</li>
<li style="height: 16px; line-height: 16px; overflow: hidden;">
<a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家4</a>
</li>
</ul>
</div>
js:
引入jquery文件cdn
<script src="http://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script> /*公告滚动*/ $(function(){ var len = $(".scroll-con li").length; console.log(len); if(len > 1){ textRoll=function(){ $(".scroll-wrap").find(".scroll-con").animate({ marginTop : "-16px" },500,function(){ $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); }); }; var roll= setInterval('textRoll()',1000); $(".scroll-con li").mouseenter(function() { clearInterval(roll); }).mouseout(function(){ clearInterval(roll); roll= setInterval('textRoll()',1000); }); } }) </script>