function marquee(){
var speed=50,
marqueeW=document.getElementById("marquee-wrap"),
marquee1=document.getElementById("marquee1"),
marquee2=document.getElementById("marquee2");
var myMarquee;
function scroll(){
if(marquee2.offsetTop*2-marqueeW.scrollTop<=40){
marqueeW.scrollTop=0;
}else{
marqueeW.scrollTop++;
if(marqueeW.scrollTop%40==0){
clearTimeout(myMarquee);
setTimeout(function(){ myMarquee=setInterval(scroll,speed);},2000)
}
}
}
myMarquee=setInterval(scroll,speed);
marqueeW.οnmοuseοver=function(){clearInterval(myMarquee);}
marqueeW.οnmοuseleave=function(){myMarquee=setInterval(scroll,speed)}
}
window.οnlοad=function(){
marquee();
}
<div id="marquee-wrap">
<div id="marquee1">
<p>第一条</p>
<p>第二条</p>
</div>
<div id="marquee2">
<p>第一条</p>
<p>第二条</p>
</div>
</div>
.marquee-wrap{height:40px;line-height:40px;overflow:hidden;white-space:nowrap;}
.marquee-wrap>div:first-child{padding-top:40px;}
.marquee-wrap>div{white-space:nowrap;}
.marquee-wrap>div>span{margin-right:40px;}
.icon-bugle{position:absolute;left:-25px;top:20%;width:23px;}
-------------------2017-11-17补充---------------------
有个bug,滚到最后一条的时候直接变成最开始的那条
解决:给第一个marquee1加个padding-top(是为行高)判断那里是为
if(marquee2.offsetTop*2-marqueeW.scrollTop<=80){...}