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> mypaly </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Ul, li {list-style: none ;}
Body {
Text-align: center;
}
# Play {
Width: 400px;
Height: 300px;
Position: absolute;
Left: 50%;
Top: 50%;
Margin:-155px 0 0-205px;
Overflow: hidden;
}
# Playimg {
Width: 400px;
Height: 300px;
Position: absolute;
}
# Playimg li {
Height: 300px;
Overflow: hidden;
}
# Playimg img {
Width: 400px;
Height: 300px;
}
# Playbtn {
Position: absolute;
Left: 0;
Bottom: 5px;
}
# Playbtn li {
Display: inline;
Background: # eee;
Padding: 2px 5px;
Margin: 0 3px;
Cursor: pointer;
}
# Playbtn. current {
Background: # f0f;
}
</Style>
<Script type = "text/javascript">
Function $ (id) {return document. getElementById (id )}
Function moveElement (elementID, final_x, final_y, interval) {// This method is clear in the DOM art book.
If (! Document. getElementById) return false;
If (! Document. getElementById (elementID) return false;
Var elem = document. getElementById (elementID );
If (elem. movement ){
ClearTimeout (elem. movement );
}
If (! Elem. style. left ){
Elem. style. left = "0px ";
}
If (! Elem. style. top ){
Elem. style. top = "0px ";
}
Var xpos = parseInt (elem. style. left );
Var ypos = parseInt (elem. style. top );
If (xpos = final_x & ypos = final_y ){
Return true;
}
If (xpos <final_x ){
Var dist = Math. ceil (final_x-xpos)/10 );
Xpos = xpos + dist;
}
If (xpos> final_x ){
Var dist = Math. ceil (xpos-final_x)/10 );
Xpos = xpos-dist;
}
If (ypos <final_y ){
Var dist = Math. ceil (final_y-ypos)/10 );
Ypos = ypos + dist;
}
If (ypos> final_y ){
Var dist = Math. ceil (ypos-final_y)/10 );
Ypos = ypos-dist;
}
Elem. style. left = xpos + "px ";
Elem. style. top = ypos + "px ";
Var repeat = "moveElement ('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
Elem. movement = setTimeout (repeat, interval );
}
Function imgChange (num) {// switch the image focus
If (! $ ('Play') return false;
Var piclist = $ ('playimg '). getElementsByTagName ('img ');
Var imgheight = piclist [0]. offsetHeight;
Var moveY =-(imgheight * num );
MoveElement ('playimg ', 0, moveY, 5 );
}
Function classToggle (arr, n) {// switch button style
For (var I = 0; I <arr. length; I ++ ){
Arr [I]. className = '';
}
Arr [n]. className = 'current ';
}
Function btnChange (btns) {// move the mouse to play
If (! $ (Btns) return false;
$ ('Play'). onmouseover = function () {autokey = false };
$ ('Play'). onmouseout = function () {autokey = true };
Var arr = $ (btns). getElementsByTagName ('lil ');
For (var I = 0; I <arr. length; I ++ ){
Arr [I]. index = I; // you can specify the index number.
Arr [I]. onmouseover = function (){
// Var num = index (this, arr );
ClassToggle (arr, this. index );
ImgChange (this. index );
}
}
}
Function autoChange (btns ){
If (! $ (Btns) return false;
If (! Autokey) return false;
Var arr = $ (btns). getElementsByTagName ('lil ');
For (var I = 0; I <arr. length; I ++ ){
If (arr [I]. className = 'current '){
Var n = I + 1;
}
}
If (n> = arr. length) n = 0;
ClassToggle (arr, n );
ImgChange (n );
}
Var autokey = true;
SetInterval ("autoChange ('playbtn')", 3000 );
Window. onload = function (){
BtnChange ('playbtn ');
}
</Script>
</Head>
<Body>
<Div id = "play">
<Ul id = "playimg">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Ul id = "playbtn"> <li class = "current"> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> </ul>
</Div>
</Body>
</Html>