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();
                  });
              });
          }