我的切换图片效果都乱掉了......
鼠标没有hover，都是正常切换，一旦，hover之后，就乱套了.....
我想了很多，发现gogo（）有问题。
解决不掉这个问题......。。。
<style type="text/css">
#place
{
width:350px;
height:251px;
margin-left:200px;
}
ul
{
margin:0px;
padding:0px;
list-style-type:none;
position:absolute;
left: 457px;
top: 255px;
height: 28px;
}
ul li
{
float:left;
width:25px;
height:20px;
margin-left:10px;
}
.bg1
{
background-image:url(images/imagesshow/btn2.gif);
}
.bg2
{
background-image:url(images/imagesshow/btn.jpg);
}
</style>
<script type="text/javascript">
window.onload=function()
{
createPlace();
time = setInterval("changeImg()",1000);
}
function createPlace()
{
var place = document.getElementById("place");
var showplace = document.createElement("img");
showplace.setAttribute("src","images/imagesshow/big4.gif");
showplace.setAttribute("id","showplace");
place.appendChild(showplace);
var rect = document.getElementById("rect");
rectli = rect.getElementsByTagName("li");
for(var i=0;i<rectli.length;i++)
{
rectli[i].setAttribute("class","bg1");
}
rectli[0].setAttribute("class","bg2");
}
var count=0;//当前的src
var count2=1;//之后替换的src
var myar = [4,1,3,2];
function changeImg()
{
var showplace = document.getElementById("showplace");
var source = showplace.getAttribute("src");
if(count>3) count=0;
if(count2>3) count2=0;
var csource = source.replace(myar[count],myar[count2]);
showplace.setAttribute("src",csource);
for(var j=0;j<4;j++)
{
rectli[j].setAttribute("class","bg1");
rectli[j].onmouseout=function()
{
time = setInterval("changeImg()",1000);
}
}
rectli[count2].setAttribute("class","bg2");
count++;
count2++;
}
function gogo(whichrect)
{
clearInterval(time);
var rect = document.getElementById("rect");
rectli = rect.getElementsByTagName("li");
for(var i=0;i<rectli.length;i++)
{
rectli[i].setAttribute("class","bg1");
}
rectli[whichrect].setAttribute("class","bg2");
var showplace = document.getElementById("showplace");
var source = showplace.getAttribute("src");
var csource = source.replace(myar[count],myar[whichrect]);
count=whichrect;
showplace.setAttribute("src",csource);
}
</script>
</head>
<body style="background-color:#000">
<div id="place">
</div>
<ul id="rect">
<li onmouseover="gogo(0)"></li>
<li onmouseover="gogo(1)"></li>
<li onmouseover="gogo(2)"></li>
<li onmouseover="gogo(3)"></li>
</ul>
