信息轮播滚动

 1、第一种

css

#slide {
    position: relative;
    margin: 1rem 0;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: url(../images/laba.png?v=aa) 2.6rem center/.95rem .775rem no-repeat;
}
#slide ul {
    width: 100%;
    min-height: 100%;
    position: absolute;
    left: 3.6rem;
    top: 0;
}
#slide li{padding-left: 3px; display: -webkit-box; -webkit-box-align: center; height: .8rem; line-height: .8rem; font-size: .6rem; color: #333; }

<div id="slide">
<ul id="con1">      </ul>
        </div>
 (function(){
       var cityname = ['广州','上海','惠州','深圳','南京','沈阳','三亚','合肥','武汉','杭州','常州','无锡','郑州','大连','宁波','重庆','东莞','南宁','西安','济南','昆明','泉州','北京','天津','唐山','苏州','厦门','株洲','洛阳','南通','长春','保定'];
       var uservalue = ['赵','钱','孙','李','周','吴','郑','王','冯','陈','褚','卫','蒋','沈','韩','杨','朱','秦','尤','许','何','吕','施','张','孔','曹','严','华','金','魏','陶','姜','戚','谢','邹','喻','柏','水','窦','章','云','苏','潘','葛','奚','范','彭','郎','鲁','韦','昌','马','苗','凤','花','方','俞','任','袁','柳','酆','鲍','史','唐','费','廉','岑','薛','雷','贺','倪','汤'];
       var lihtml = '';
       for(var i=0;i<40;i++){
        var myDate = new Date();
        var month = myDate.getMonth()+1;
        var nday = myDate.getDate();
         var date = Math.floor((Math.random()*nday))+1;
         var city = cityname[Math.floor((Math.random()*cityname.length))];
         var user = uservalue[Math.floor((Math.random()*uservalue.length))];
         var sex = Math.random()>0.4?'先生':'小姐';
         var text = '<li>'+city+user+sex+'（'+(month<10?'0'+month:month)+'月'+(date <10 ? '0'+date:date) +'日）成功预约免费设计</li>';
         lihtml+=text;
       }
       $('#con1').html(lihtml);
        setInterval(scrollTxt,1500);
        function scrollTxt(){
            var first = $('#con1 li').first();
            $('#con1').animate({ top : '-.8rem' }, 1000, function(){
                $('#con1').append(first);
                $('#con1').css('top',0);
            })
        }
    })();

第二种、

.rollbox{width:52%;position:absolute;top:1%;left:36%;}
.rolling{overflow:hidden;height:1.5rem;font-size:14px;position:relative;margin:0 auto; }
.crollul{ height:140px; overflow:hidden;font-size: 0.5rem}
.crollul li{text-align: left;line-height:20px; color:#511338;font-size:0.5rem;}
<div class="rollbox">
        <div class="rolling rolling1">
          <div class="crollul tt_first">
            <ul>
              <li>济南李先生3秒前185****7055</li>
              <li>珠海林先生8秒前 150****5518</li>
              <li>深圳裴先生15秒前 186****3927</li>
              <li>北京丁女士30秒前 138****2948</li>
              <li>郑州谢先生50秒前 159****1125</li>
              <li>北京祝先生1分钟前 131****5587</li>
              <li>合肥黄女士1分钟前 183****2801</li>
              <li>武汉陈先生2分钟前170****4709</li>
              <li>贵阳向先生4分钟前 130****5858</li>
              <li>珠海于女士5分钟前 152****1158</li>
              <li>深圳蜀先生6分钟前189****3019</li>
              </ul>
              <ul>
              <li>济南李先生3秒前185****7055</li>
              <li>珠海林先生8秒前 150****5518</li>
              <li>深圳裴先生15秒前 186****3927</li>
              <li>北京丁女士30秒前 138****2948</li>
              <li>郑州谢先生50秒前 159****1125</li>
              <li>北京祝先生1分钟前 131****5587</li>
              <li>合肥黄女士1分钟前 183****2801</li>
              <li>武汉陈先生2分钟前170****4709</li>
              <li>贵阳向先生4分钟前 130****5858</li>
              <li>珠海于女士5分钟前 152****1158</li>
              <li>深圳蜀先生6分钟前189****3019</li>
            </ul>
          </div>
        </div>
      </div>
!(function(){
  var srollHeight=parseInt($('.crollul ul:first').height());
  var srollindex=0;
  function mysroll(){
    if(srollindex<=srollHeight){
      srollindex++;
    }else if(srollindex>srollHeight){
      $('.crollul ul:first').insertAfter('.crollul ul:last');
      srollindex=0;
    };
    $('.crollul').scrollTop(srollindex)
  }
  var srolltime=setInterval(mysroll,50);
})()