废话不多说了,直接给大家贴代码了,具体代码如下所示:
<div class="lunbo123" style="position:relative;height: 45px;overflow: hidden;background-color:white" ;><ul id="myul" style="margin:6px;padding:0px;position:absolute;width: 700px; height: auto;"><li><a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; "><span style="height:36px ; line-height: 36px;">公告test1 </span></a></br></li><li><a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; "><span style="height:36px ; line-height: 36px;">活动test2 </span></a></br></li></ul></div><script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script><script>function lunbo123(id, height) {var ul = $(id);var liFirst = ul.find('li:first');$(id).animate({top: height}).animate({"top": 0}, 0, function() {var clone = liFirst.clone();$(id).append(clone);liFirst.remove();})}setInterval("lunbo123('#myul','-45px')", 2500)</script><style>#myul {list-style-type: none;width: 300px;height: 45px;font-size: 20px;}</style>
总结
以上所述是小编给大家介绍的基于jQuery实现的单行公告活动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!
新闻热点
疑难解答