简单的通知轮播 jquery + html + css 实现

 <style>
    .lunbo{
     width: 600px;
     position: relative;
     /*width: 1180px;*/
     height: 50px;
     left:70px;
     top:65px;
     overflow: hidden;
     line-height: 45px;
     }
     .lb_ul{
     position:absolute;
     left: 60px;
     top:0;
     /*width: 1180px;*/
     height: auto;
     }
     .lb_li{
     /*width: 1180px;*/
     height: 50px;
     line-height: 50px;
     font-size:15px;
     color:#747474;
     /*text-align: center;*/
     list-style:none; 
     
     }

     .lb_li a{
        color: red;
     }

     .yin{
        width:500px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
     }
     .kc_tongzhi{

    color: red;

    font-size: 20px;
}
    </style>





<if condition="$baozhiqi eq 223">
        <b style="font-size: 20px;color: #7AD237;">没有保质期预警商品</b>
        <else />
        
        <div class="lunbo">
          <b class="kc_tongzhi">通知 :</b>
             <ul class="lb_ul">
                <volist name="baozhiqi" id="baozhiqi">
                    <li class="lb_li"><p class="yin"><a href="">"{$baozhiqi[goods_name]}" 有效保质期至 {$baozhiqi[baozhiqi]}, 不足三个月，请注意更换！</a></p></li>
                </volist>
            </ul>
        </div>
        </if>

<script>
 function lunbo(id,height){
          var ul=$(id);
          var liFirst=ul.find('li:first');
          $(id).animate({top:height}).animate({"top":0},0,function(){
          var clone=liFirst.clone();
          $(id).append(clone);
          liFirst.remove();
          })
         }
         setInterval("lunbo('.lb_ul','-50px')",3500);
</script>