Js单行轮播

#demo{width: 200px;height: 30px;overflow: hidden;border: 1px solid #000000;}
#demo1{transition: 1s linear;}
#demo1 li{line-height: 30px;list-style: none;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#demo div{height: 30px;line-height: 30px;}

<div id='demo'>
	<ul id="demo1">
		<li>测试测试测试测试</li>
		<li>测试测试测试测试</li>
		<li>测试测试测试测试</li>
	</ul>
   <!--占位-->
	<div id="demo2">测试测试测试测试</div>
</div>

var speed = 30; 
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
function Marquee() {
	if(tab.scrollTop - tab1.clientHeight >= 0) {
		tab.scrollTop = 0;
	} else {
		tab.scrollTop += 1;
	}
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function() {
	clearInterval(MyMar)
};
tab.onmouseout = function() {
	MyMar = setInterval(Marquee, speed)
};