Code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
# ImgMove {height: 205px; width: 624px; border: #000 1px solid; position: relative; margin: 200px auto; overflow: hidden ;}
# ImgMove ul {height: 205px; position: absolute; left: 0; overflow: hidden ;}
# ImgMove li {list-style: none; float: left; height: 205px; width: 156px; margin: 0 ;}
A img, img {border: none ;}
Span {z-index: 999; height: 68px; width: 68px; display: none; position: absolute; cursor: pointer ;}
# MoveLeft {left: 0; top: 68px ;}
# MoveRight {right:-10px; top: 68px ;}
</Style>
<Script type = "text/javascript">
Window. onload = function (){
Var oDiv = document. getElementById ('imgmove ');
Var oUl = oDiv. getElementsByTagName ('ul ') [0];
Var oli = oUl. getElementsByTagName ('lil ');
Var liSpeed = 1;
Var ospan = oDiv. getElementsByTagName ('span ');
Var rightmove = document. getElementById ('veright ');
Var leftmove = document. getElementById ('moveleft ');
Function show (){
Ospan [0]. style. display = "block ";
Ospan [1]. style. display = "block ";
}
OUl. onmouseover = function (){
Show ();
}
OUl. onmouseout = function (){
Ospan [0]. style. display = "none ";
Ospan [1]. style. display = "none ";
}
Ospan [0]. onmouseover = function (){
LiSpeed = 1;
Show ();/* Add this function to remove the image from the left to the right */
}
Ospan [1]. onmouseover = function (){
LiSpeed =-1;
Show ();/* Add this function to remove the image from the left to the right */
}
OUl. style. width = oli [0]. offsetWidth * oli. length + 'px ';;
SetInterval (function (){
OUl. style. left = oUl. offsetLeft-liSpeed + 'px ';
If (oUl. offsetLeft <-oUl. offsetWidth/2 ){
OUl. style. left = 0;
}
Else if (oUl. offsetLeft> 0)
{
OUl. style. left =-oUl. offsetWidth/2 + 'px ';
}
}, 30)
}
</Script>
</Head>
<Body>
<Div id = "imgMove">
<Ul>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
</Ul>
<Span id = "moveLeft"> </span>
<Span id = "moveRight"> </div>
</Div>
</Body>
</Html>