jq实现公告栏上下滚动

html

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

js

<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>

猜你喜欢

转载自blog.csdn.net/stars______/article/details/128164090