关于一段轮播的代码，我写的太死板的

下面是一段jQ，我写的太死板了 想想，如果有N张图片的话，那我不是要写N段这样的话，并且这个定时间的时间也没有和fadeToggle这个时间同步
<!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>
<style type="text/css">
*{
    margin:0px;
padding:0px;
}
.wokao{
width:700px;
height:100px;
margin:0px auto;
overflow:hidden
}
.wokao ul{
width:700px;
list-style-type:none;
overflow:hidden
}
.one{
width:700px;
background-color:#000;

}
.two{
width:700px;
background-color:#3F0;

}
.three{
width:700px;
background-color:#90F;

}
.wokao img{
margin-left:100px;
}
.woyun{
display:none;
}
</style>
<link href="css.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播的效果</title>
<script type="text/javascript">
$(function(){
setInterval(function(){
$(".one").fadeToggle(3000,function(){
$(this).addClass("woyun");
$(".two").fadeToggle(3000,function(){
$(this).addClass("woyun");
$(".three").fadeToggle(3000,function(){
$(this).addClass("woyun");
})
})
})
},9000);
})
</script></head><body>
<div class="wokao">
<ul>
 <li class="one"><img src="1.jpg"  width="500px" height="100px"/></li>
 <li class="two"><img src="2.jpg" width="500px" height="100px"/></li>
 <li class="three"><img src="3.jpg" width="500px" height="100px"/></li>
</ul>
</div>
</body>
</html>