<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<style>
*{padding:0; margin:0;}
ul{List-style:none;}
#div {width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;}
#div ul{position:absolute; height:100px; left:0;}
#div ul li{width:300px; height:100px line-height:100px; text-align:center; Float:left}
</style>
<script>
Window.onload=function () {
var Odiv=document.getelementbyid ("div");
var oul=odiv.getelementsbytagname ("ul") [0];
var oli=oul.getelementsbytagname ("Li");
var oinput=document.getelementsbytagname (' input ');
Oul.innerhtml +=oul.innerhtml;
oul.style.width=oli[0].offsetwidth*oli.length+ "px";
var iseep=-2;
var tamer=null;
Clearinterval (Tamer);
function Starmove () {
Tamer=setinterval (function () {
oul.style.left=oul.offsetleft+iseep+ "px";
if (-oul.offsetleft >= oul.offsetwidth/2) {
oul.style.left= "0px";
}else if (oul.offsetleft>0) {
oul.style.left=-oul.offsetwidth/2+ "px";
}
},30)
}
Starmove ();
Odiv.onmouseover=function () {
Clearinterval (Tamer);
}
Odiv.onmouseout=function () {
Starmove ();
}
Oinput[0].onclick=function () {
Iseep=-2;
}
Oinput[1].onclick=function () {
iseep=2;
}
}
</script>
<body>
<input type= "button" value= "left" >
<input type= "button" value= "right" >
<div id= ' div ' >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
