<html lang="en">
<head>
<meta charset="utf-8">
<title>渐变照片</title>
<style >
#photos img
{
position:absolute;
}
#photos
{
height:120px;
width:120px;
overflow:hidden；
}
<!-- 内部样式表结束 -->
</style>
<script src="./jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="photos">
<img alt="1" src='photos/1.jpg'/>
<img alt="2" src="./photos/2.jpg"/>
<img alt="3" src="./photos/3.jpg"/>
<img alt="4" src="./photos/4.jpg"/>
<img alt="5" src="./photos/5.jpg"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
rotate(1);
});
function rotate(currentPhoto){
var numberOfPhotos=$('#photos img').length;
currentPhoto=currentPhoto%numberOfPhotos;//取模，保证地址再0-5；
<!--alert('当前照片'+currentPhoto); -->
$('#photos img').eq(currentPhoto).fadeOut(4000,function(){
<!--alert('进来了fadeOut');-->
$('#photos img').each(function(i){
$(this).css(
'zIndex',((numberOfPhotos-i)+currentPhoto)%numberOfPhotos
);
alert(i);
});
alert(this.src); //为什么这个this.src指示的图片和下一句show显示的图片连接不一样。
$(this).show(); //这句如果删掉后来过一段时间渐变就变空白了，求解释，为什么zindex切换不能实现切换呢，还要多这一句。
setTimeout(function(){rotate(++currentPhoto);},4000);
});
};
</script>
</body>
</html>
请大家最好断点式调试式解释，让我能快速明白里面的步骤和演化。分很多，主要是看大家的热心了
