jQuery图片轮显的源程序的问题

下面这个jquery轮显图片的源程序简单好用，但就是有一点不好，轮显时图片没有切换效果，我想把它改成渐变切换，加了一句好像不行，有哪位高手能帮我把它改成有渐变切换效果的吗，还有，谁有好一点的简单的jquery轮显图片的源程序，最好还有说明，我想把它作为一个例子来讲授。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="script/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".clickButton a").attr("href","javascript:return false;");
$(".clickButton a").each(function(index){
$(this).click(function(){
changeImage(this,index);
});
});
autoChangeImage();
}); function autoChangeImage(){
for(var i = 0; i<=10000;i++){
window.setTimeout("clickButton("+(i%5+1)+")",i*3000);
}
} function clickButton(index){
$(".clickButton a:nth-child("+index+")").click();
} function changeImage(element,index){
var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];
$(".clickButton a").removeClass("active");
$(element).addClass("active");
$(".imgs img").attr("src",arryImgs[index]);
//$(".imgs img").fadeIn(600);    这是我加的 }
</script>
<style type="text/css">
<!--
div,a{margin:0;padding:0;}img{border:0px;}
.imgsBox{overflow:hidden;width:282px;height:176px;}
.imgs a{display:block;width:282px;height:164px;}
.clickButton{background-color:#888888;width:282px;height:12px;position:relative;top:-1px;_top:-5px;}
.clickButton div{float:right;}
.clickButton a{background-color:#666;border-left:#ccc 1px solid;line-height:12px;height:12px;font-size:10px;float:left;padding:0 7px;text-decoration:none;color:#fff;}
.clickButton a.active,.clickButton a:hover{background-color:#d34600;}
-->
</style>
</head>
<body><div class="imgsBox"> <div class="imgs"> <a href="#">

<img id="pic" src="images/01.jpg" width="282" height="164" />

</a>
</div> <div class="clickButton">
<div>

<a class="active" href="">1</a>
<a class="" href="">2</a>

<a class="" href="">3</a>

<a class="" href="">4</a>

<a class="" href="">5</a>

</div>
</div>
</div></body>
</html>