Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<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>
</Head>
<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>
</Html>