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

 var h=$(".tipsList").height();

          $(".tipsList ul li").each(function(){
              $(this).css({top:$(this).index()*h+'px'});
          });

          setInterval(ctxtslide,3000);   //定时器分开写
          function ctxtslide() {
              var disapear=$(".tipsList ul li").first();
              var clone=$(".tipsList ul li").first().clone();//克隆，后面就用这个克隆的
              clone.css({top:($(".tipsList ul li").length*h)+"px"});
              $(".tipsList ul").append(clone);
              $(".tipsList ul li").each(function(){
                  var top=parseInt($(this).css('top'));
                  top-=h;
                  $(this).animate({"top":top+'px'},1000,function () {
                      disapear.remove();
                  });
              });
          }