Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
<title> Testing </title>
<meta name= "Author" content= "Ximan" >
<meta name= "keywords" content= "" >
<meta name= "description" content= "" >
<link type= "Text/css" rel= "stylesheet" href= "Index.css" >
<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>