jquery图片淡入淡出

<div class="banner">
<img src="__PUBLIC__/images/index1.jpg">
<img src="__PUBLIC__/images/index2.jpg">
<img src="__PUBLIC__/images/index3.jpg">
<script type="text/javascript" src="__PUBLIC__/js/imageshow.js"></script>
</div>
<style>
.banner img {
vertical-align:top; /** 兼容IE6，去掉IE6中img下面有空隙 **/
position:absolute; /** 绝对定位，所有的图片都显示在同一个位置 **/
margin:0 auto;
} 
</style>

//这是imageshow.js
$(function(){
$(".banner img").fadeOut(0).eq(0).fadeIn(0);//先隐藏所有图片，再将对象移到第一张图片，使之淡入
var i = 0;//初始化图片的索引值
setInterval(function(){//setInterval是每隔一段时间循环一个动作
if($(".banner img").length > (i+1)){//判断是否执行到最后一张图片
$(".banner img").eq(i).fadeOut(2000).next("img").fadeIn(2000);//索引值为i的图片淡出，它的下一张图片淡入
i++;//使索引值增加1，下一次执行动作的图片索引值为i+1，
}
else{//如果为最后一张图片，将执行下面的代码
$(".banner img").eq(i).fadeOut(2000).siblings("img").eq(0).fadeIn(2000);//索引值为i的图片淡出，这里不同于上面，是第一张图片淡入
i = 0;//将索引值变为0，回到初始状态
}
},5000);//5000ms执行一次淡入淡出的动作
})