//css
.slidsWarpper{
height:100px;
width:80%;
margin:0 auto;
border:2px solid red;
overflow: hidden;
position:relative;
}
.slides{
position:absolute;
top:0;
left:0;
width:100%;
}
.slide{
height:30px;
border:1px solid goldenrod;
width:100%
}
</style>
//html
<div class="slidsWarpper">
<div class="slides">
<div class="slide">
<a target="_blank" href="#">
<p>111111111 </p>
</a>
</div>
<div class="slide">
<a target="_blank" href="#">
<p>2222222222222222</p>
</a>
</div>
<div class="slide">
<a target="_blank" href="#">
<p>2015第十五届中国国际冶金工业展览会在沪召开</p>
</a>
</div>
<div class="slide">
<a target="_blank" href="#">
<p>上海大数据分析企业亮相第二届世界互联网大会 </p>
</a>
</div>
<div class="slide">
<a target="_blank" href="#">
<p>大数据创造价值,汇赋科技邀您共聚第三届世界互联网大会 </p>
</a>
</div>
</div>
</div>
//js
window.onload = function(){
var targetTop = 30;
var targetTimer = 2000;
function scroll(){
var currentTop = Math.abs($('.slide').posiiton().top);
var duration = (targetTop - currentTop) * targetTimer / targetTop;
var slide = $('.slides').find('.slide:first');
$('.slides').animate({'top':-targetTop},duration,'linear',function(){
$('.slides').append(slide).css('top',0);
scroll();
})
}
scroll();
}