为什么不能切换相应的颜色背景

请大家帮我看看.累死我了.奋斗了10多个小时了.头都快爆炸了.检查了一个多小时了.还是不知道哪里出错了.
好心的朋友们帮下忙..希望醒来能有满意的答复.我敢肯定是slideshow()函数里出问题了.
睡觉去了.
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none;}
img{border:none;display:block;}
a{text-decoration:none;}
#navigation{
width:500px;
margin:33px auto;
border:1px solid orange;
overflow:hidden;
height:680px;
}
#naviContent{
width:220px;
float:right;
}
#naviContent li{
width:220px;
height:44px;
display:block;
float:left;
clear:both;
overflow:hidden;
border-bottom:1px solid #ccc;
}
#naviContent span{
display:block;
width:200px;
text-align:center;
font-size:13px;
line-height:20px;
color:#838684;
}
#naviContent span strong{
color:#4a4c4a;
}
#naviImage{
width:270px;
border:1px solid red;
height:680px;
overflow:hidden;
position:relative;
}
#image_1{
background:blue;
width:270px;
height:180px;
}
#image_2{
background:yellow;
width:270px;
height:180px;
}
#image_3{
background:red;
width:270px;
height:180px;
}
#image_4{
background:green;
width:270px;
height:180px;
}
</style>
<script type="text/javascript">
function moveMessage(elementID,final_x,final_y,interval){
var elem = document.getElementById(elementID);
if(elem.movement){
clearTimeout(elem.movement);
}
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 = "moveMessage('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval)
}
function slideshow(){
for(var i=1; i<4; i++){
var slideshow = document.getElementById("image_"+i);
slideshow.style.position = "absolute";
slideshow.style.left = "0px";
slideshow.style.top = "0px";
var list = document.getElementById("list");
var links = list.getElementsByTagName("a");
links[0].onmouseover = function(){
moveMessage("image_1",0,0,10);
}
links[1].onmouseover = function(){
moveMessage("image_2",270,0,10);
}
links[2].onmouseover = function(){
moveMessage("image_3",540,0,10);
}
links[3].onmouseover = function(){
moveMessage("image_4",-820,0,10);
}
}
}
window.onload = slideshow;
</script>
</head>
<body>
<div id="navigation">
<div id="naviContent">
<ul id="list">
<li><a href=""><span><strong>蓝色</strong></span><span>这是蓝色ss!</span></a></li>
<li><a href=""><span><strong>黄色</strong></span><span>这是黄色!</span></a></li>
<li><a href=""><span><strong>红色</strong></span><span>这是红色!</span></a></li>
<li><a href=""><span><strong>绿色</strong></span><span>这是绿色!</span></a></li>
</ul>
</div>
<div id="naviImage">
<a href=""><img src="images/blue.gif" id="image_1" /></a>
<a href=""><img src="images/yellow.gif" id="image_2" /></a>
<a href=""><img src="images/red.gif" id="image_3" /></a>
<a href=""><img src="images/green.gif" id="image_4" /></a>
</div>
</div>
</body>
</html>