效果图
图中推荐右侧就是我们想要实现的效果
实现原理:
利用setInterval+animate实现在定时不间断的动态显示我们想要展示的一条条信息
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style type="text/css">
*{margin: 0;padding: 0}
</style>
<body>
<div id="lunbo" style="height:45px;line-height:45px;font-size:12px;overflow:hidden;background:pink">
<div id="roundItem" style="position:relative;top:0;">
<p style="height:45px;overflow:hidden;">内容1</p>
<p style="height:45px;overflow:hidden;">内容2</p>
<p style="height:45px;overflow:hidden;">内容3</p>
<p style="height:45px;overflow:hidden;">内容4</p>
<p style="height:45px;overflow:hidden;">内容5</p>
<p style="height:45px;overflow:hidden;">内容6</p>
</div>
</div>
</body>
<script type="text/javascript">
var time=2000;//
var time=setInterval(function(){
//添加top动画
$('#roundItem').animate({top:-45},1000,function(){ //45为元素高
//将第一个元素放到末尾
$('#roundItem').find("p:first").insertAfter($('#roundItem').find("p:last"));
//top改为0
$('#roundItem').css({"top":0});
});
},time)
</script>
</html>