首页 > 编程 > JavaScript > 正文

基于jQuery实现的单行公告活动轮播效果

2019-11-19 15:42:03
字体:
来源:转载
供稿:网友

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<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实现的单行公告活动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表