如何把这个幻灯片相隔一定时间自动切换图片啊?

<html>
<head>
<script type="text/javascript">
function showpic(whichpic){
var s = whichpic.getAttribute("href");
var flower = document.getElementById("flower");
flower.setAttribute("src",s); var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
</script>
<style type="text/css">
*{margin:0;padding:0;}
#gallery{
width:500px;
background:orange;
margin:55px auto;
position:relative;
}
#gallery ul{
list-style:none;
width:500px;
height:25px;
background:url(images/bg.png) no-repeat;
text-align:right;
position:absolute;
bottom:0;
left:0;
}
#gallery li{
float:right;
}
#gallery #flower{
display:block;
}
#gallery li a{
float:left;
width:40px;
height:25px;
line-height:25px;
border-left:1px solid #fff;
font-size:13px;
text-align:center;
text-decoration:none;
color:#000;
}
#gallery li a:hover{
background:#aeffdc;
}
#description{
color:blue;
position:absolute;
top:0;
font-size:13px;
}
</style>
</head> <body>
<div id="gallery">
<ul id="list">
<li><a href="http://t1.baidu.com/it/u=3237263832,1421604454&fm=0&gp=0.jpg" title="这是一朵花" onclick="return false" onmouseover="showpic(this);">花</a></li>
<li><a href="http://t3.baidu.com/it/u=2440855537,3626174603&fm=0&gp=0.jpg" title="这是一棵草"  onclick="return false" onmouseover="showpic(this);">草</a></li>
<li><a href="http://t1.baidu.com/it/u=1386178207,1528476692&fm=0&gp=0.jpg" title="这是一片叶"  onclick="return false" onmouseover="showpic(this);">叶</a></li>
<li><a href="http://t2.baidu.com/it/u=1430127905,903346673&fm=0&gp=0.jpg" title="这是一片天空"  onclick="return false" onmouseover="showpic(this);">天空</a></li>
</ul>
<img src="images/flower.jpg" id="flower" width="500" height="200" />
<p id="description">图片描述!</p>
</div>
</body>
</html>