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

     
    
      
        
       
打开房间看风景咖啡
        
       
看似简单两节课的积分
        
       
大家辣椒粉都纷纷离开家
    
      
     

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

*{
       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           }