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 = gbk">
<Title> test </title>
<Meta name = "author" content = "ximan">
<Meta name = "keywords" content = "">
<Meta name = "description" content = "">
<Link type = "text/css" rel = "stylesheet" href = "index.css">
</Head>
<Body>
<Div class = "content">
<Ul id = "num">
<Li style = "background: # f00;">
</Li>
<Li>
</Li>
<Li>
</Li>
<Li>
</Li>
<Li>
</Li>
</Ul>
<Ul id = "img_box">
<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>
</Div>
<Script type = "text/javascript">
</Script>
<Script type = "text/javascript">
Window. onload = function (){
Var num = document. getElementById ("num ");
Var num_li = document. getElementById ("num"). getElementsByTagName ("li ");
Var img_box = document. getElementById ("img_box ");
Var img_box_li = document. getElementById ("img_box"). getElementsByTagName ("li ");
Var bliw = img_box_li [0]. offsetWidth;
Var n = 0;
Img_box.style.left = 0
Var autoscroll = setInterval (auto, 3000 );
For (var I = 0; I <num_li.length; I ++ ){
Num_li [I]. onmouseover = function (){
ClearInterval (autoscroll );
For (var I = 0; I <num_li.length; I ++ ){
Num_li [I]. style. background = "";
If (num_li [I] = this ){
This. style. background = "# f00 ";
Slide (I );
}
}
}
Num_li [I]. onmouseout = function (){
For (var I = 0; I <num_li.length; I ++ ){
If (num_li [I] = this ){
N = I;
Autoscroll = setInterval (auto, 3000)
}
}
}
}
Function slide (I ){
Img_box.style.left =-bliw * I + "px ";
}
Function auto (){
N ++;
If (n = img_box_li.length ){
N = 0;
}
For (var I = 0; I <num_li.length; I ++ ){
Num_li [I]. style. background = "";
}
Num_li [n]. style. background = "# f00 ";
Slide (n );
}
}
</Script>
</Body>
</Html>