JavaScript文本的上下垂直轮播

首先 HTML需要两个以上的li标签来承载文本

<div class="tipsList">
    <ul>
        <li>打开房间看风景咖啡</li>
        <li>看似简单两节课的积分</li>
        <li>大家辣椒粉都纷纷离开家</li>
    </ul>
</div>

然后需要给他们的每一个元素赋予足够的宽度和高度，稍微的添加一些显示样式

*{
    margin:0;
    padding:0;
}
.tipsList{
    width:500px;
    height:20px;
    line-height:20px;
    font-size:14px;
    background:#eee;
    border-radius:5px;
    text-align:center;
    overflow:hidden;
    margin:50px auto;
    
}
.tipsList ul{
    position:relative;
}
.tipsList ul li{
    list-style:none;
    position:absolute;
    width:100%;

}

js的思想是1、获取到第一个li标签，2、 获取它的高度并让它网上移动，3、 再把这个li重新插到ul的底部。使用animate() 和 settimeout() 如此往复循环，jQuery代码

 1  var h=$(".tipsList").height();
 2 
 3           $(".tipsList ul li").each(function(){
 4               $(this).css({top:$(this).index()*h+\'px\'});
 5           });
 6 
 7           setInterval(ctxtslide,3000);   //定时器分开写
 8           function ctxtslide() {
 9               var disapear=$(".tipsList ul li").first();
10               var clone=$(".tipsList ul li").first().clone();//克隆，后面就用这个克隆的
11               clone.css({top:($(".tipsList ul li").length*h)+"px"});
12               $(".tipsList ul").append(clone);
13               $(".tipsList ul li").each(function(){
14                   var top=parseInt($(this).css(\'top\'));
15                   top-=h;
16                   $(this).animate({"top":top+\'px\'},1000,function () {
17                       disapear.remove();
18                   });
19               });
20           }