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

时间:2021-05-25

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章