jq实现公告栏上下滚动

秃头黑魔仙

已于 2023-02-11 09:50:42 修改

阅读量499

点赞数 1

分类专栏： jq 文章标签： javascript 前端 html

于 2022-12-03 17:34:17 首次发布

本文链接：https://blog.csdn.net/stars______/article/details/128164090

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html

<div style="height:105px;overflow: hidden;">
	<ul class="ul1">
		<li>
			111111111
		</li>
        <li>
			111111111
		</li>
        <li>
			111111111
		</li>
		{/volist}
	</ul>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		var num=$(".ul1").find("li").length;
		if (num>1) {
			setInterval(function(){
				$('.ul1').animate({
					marginTop:"-105px" //最外层div的高度,滑动的高度
				},500,function(){
					$(this).css({marginTop : "0"}).find("li:first").appendTo(this);
				});
			}, 5000);
		}
	});
</script>