公告栏上下轮播

 

$(document).ready(function () {
    一开始进入，用js调整样式
     for(var i=0;i<$(".tipsList li").length;i++){
      $(".tipsList li").eq(i).css({top:i*0.3+'rem'})
     }
   })
     
     setInterval("ctxtslide()",3000);   定时器分开写
     function ctxtslide() {
       var disapear=$(".tipsList li:first");
       var newTemp=$(".tipsList li:first").clone();   克隆，后面就用这个克隆的
       newTemp.css({top:($(".tipsList li").length*0.3)+"rem"});
       $(".tipsList ul").append(newTemp);
       $(".tipsList li").animate({"top":"-=0.3rem"},1000,function () {
        disapear.remove();
       })
     }

这个案例在轮播图中也可以使用，轮播图实现无缝链接