<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片滑动切换效果</title>
<script src="SlideTrans.js"></script>
<style type="text/css">
.container ul, .container li{list-style:none;margin:0;padding:0;}
.num{ 
position:absolute;
right:5px; 
bottom:5px; 
font:12px/1.5 tahoma, arial; 
height:18px;
}
.num li{
float: left;
color: #d94b01;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 11px;
cursor: pointer;
margin-left: 3px;
border: 1px solid #f47500;
background-color: #fcf2cf;
}
.num li.on{
line-height: 18px;
width: 18px;
height: 18px;
font-size: 14px;
margin-top:-2px;
background-color: #ff9415;
font-weight: bold;
color:#FFF;
}
</style>
</head>
<body>
<style type="text/css"> 
.container, .container img{width:520px; height:280px;}
.container img{border:0;vertical-align:top;}
</style>
<div class="container" id="idContainer">
<table id="idSlider" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href=""><img src="1.jpg"/></a></td>
<td><a href=""><img src="2.png"/></a></td>
<td><a href=""><img src="3.jpg"/></a></td>
<td><a href=""><img src="4.jpg"/></a></td>
<td><a href=""><img src="5.png"/></a></td>
</tr>
</table>
<ul class="num" id="idNum">
</ul>
</div>
<script>
new SlideTrans("idContainer", "idSlider", 5, { Vertical: false,Change:520 }).Run();
</script>
<script>
var nums = [], timer, n = $$("idSlider").getElementsByTagName("a").length,
st = new SlideTrans("idContainer", "idSlider",  {
onStart: function(){//设置按钮样式
forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })
}
});
for(var i = 1; i <= n; AddNum(i++)){};
function AddNum(i){
var num = $$("idNum").appendChild(document.createElement("li"));
num.innerHTML = i--;
num.onmouseover = function(){
timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200);
}
num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); }
nums[i] = num;
}
st.Run();
</script>
</body>
</html>
怎么样才可以实现鼠标悬停到1 2 3 4 5 上面就实现图片切换啊 htmljavascriptfunction